js實(shí)現(xiàn)圖片聯(lián)動效果

一.實(shí)現(xiàn)理論基礎(chǔ)：

     (1)使用定時(shí)器setInterval()，完成動畫效果；

（2）使用json傳值，實(shí)現(xiàn)多個屬性同時(shí)動畫效果（比如：寬度，高度，透明度等可以一起進(jìn)行動畫效果）；

 （3）使用回調(diào)函數(shù)，實(shí)現(xiàn)鏈?zhǔn)絼赢嫞ň褪菍挾戎翟龃蟮侥康闹?，然后繼續(xù)寬度值減小的變化）；

（4）使用目標(biāo)值減去初始值除以一個值（比如10），得到每次變化的增量，可以使得動畫效果從初始值到目標(biāo)值有個過度的過程,以不同的增量進(jìn)行變化，而不是瞬間完成。

     speed=(json[attr]-curr)/10

     (5)使用一個標(biāo)志位flag，來控制當(dāng)所有的動畫效果都已經(jīng)完成才清除此次動畫效果的定時(shí)器，否則繼續(xù)進(jìn)行定時(shí)器的操作，完成動畫效果。

二．Html框架

     很簡單，就一個父容器，包裹著幾張圖片。

<div id="container">
    <div id="list" >    
        <img src="../img/demo1.jpg" alt="1"/>
        <img src="../img/demo2.jpg" alt="2"/>
        <img src="../img/demo3.jpg" alt="3"/>
        <img src="../img/demo4.jpg" alt="4"/>
        <img src="../img/demo5.jpg" alt="5"/>      
    </div>
   
</div>

 三.js實(shí)現(xiàn)

window.onload = function () {
 
    var list = document.getElementById('list');
    var listI = list.getElementsByTagName('img');
    //給每一張圖片添加事件綁定
    for (var i = 0; i < listI.length; i++) {
 
        listI[i].addEventListener("mouseover", function () {
            change(this);
        }, false);
 
    }
 
    //鼠標(biāo)移出list區(qū)域，圖片回到初始時(shí)的寬度200
 
    list.addEventListener("mouseout", function () {
        for (var i = 0; i < list.children.length; i++) {
            startMove(list.children[i], {
                "width": "200",
                "opacity": "70"
            }, 50);
        }
    }, false);
 
 
    //當(dāng)鼠標(biāo)移過圖片時(shí)，讓焦點(diǎn)沒在其他圖片上的圖片寬度變?yōu)?00px,透明度變?yōu)?.7，而鼠標(biāo)移動到的那張圖片寬度變?yōu)?00
 
    function change(obj) {
 
        var children = obj.parentNode.children; //為了獲得其他img的兄弟節(jié)點(diǎn)   
 
        for (var j = 0; j < children.length; j++) {
            if (obj != children[j]) {
                startMove(children[j], {
                    "width": "100",
                    "opacity": "70"
                }, 50, startMove(obj, {
                    "width": "600",
                    "opacity": "100"
                }, 50));
            }
        }; 
    }
 
}
//進(jìn)行js運(yùn)動效果的函數(shù)
 function startMove(obj, json, interval, fn) {
    clearInterval(obj.timer); //該對象每次開始動畫，都先停止掉正在進(jìn)行的計(jì)數(shù)器,以免發(fā)生計(jì)數(shù)器運(yùn)動速度會不斷增快的效果。
    var flag; //用來表示所有運(yùn)動是否到達(dá)目標(biāo)值
    //開啟定時(shí)器，每隔Interval時(shí)間段執(zhí)行相應(yīng)動作
    
    obj.timer = setInterval(function () {
        flag = true; //進(jìn)入定時(shí)器時(shí),現(xiàn)將flag設(shè)置為所有的屬性都已達(dá)到目標(biāo)值
        //獲取傳過來的Json值（需要變化的屬性，因?yàn)橐瑫r(shí)執(zhí)行多屬性，所以這里使用了json傳值）。
        for (var attr in json) {
 
            var curr = 0;//用來獲得當(dāng)下的屬性值
            //判斷所傳遞的屬性是否為透明度
            if (attr == 'opacity') { //如果是透明度，則獲取該對象此刻的透明度值
 
                curr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else { //否則，獲取該屬性的當(dāng)下其他屬性值
                curr = parseInt(getStyle(obj, attr));
            }
            //進(jìn)行運(yùn)動的速度處理
            var speed = 0;
            speed = (json[attr] - curr) / 10; //每次速度變化的增量，每次實(shí)時(shí)的獲得，可以達(dá)到變速運(yùn)動
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //速度增量大于0，向上取整，速度增量小于0,向下取整
            if (curr != json[attr]) { //當(dāng)隨著屬性值還不等于要達(dá)到的目標(biāo)值，就將flag設(shè)置為false;
                flag = false;
            }
            //進(jìn)行運(yùn)動變化
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (curr + speed) + ")";
                obj.style.opacity = (curr + speed) / 100;
            } else {
                obj.style[attr] = curr + speed + 'px';
            }
        }
 
 
        if (flag) { //如果flag值為true,說明傳來的屬性值，都已經(jīng)變化到目標(biāo)值，就可以清除計(jì)數(shù)器，
            //同時(shí)在檢查是否有回調(diào)函數(shù)傳入,若有就繼續(xù)執(zhí)行回調(diào)函數(shù)。
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, interval);
}
//獲得樣式函數(shù) 
function getStyle(element, attr) {
    var value;
    if (typeof window.getComputedStyle != 'undefined') { //非ＩＥ下獲得屬性的方法
        value = window.getComputedStyle(element, null)[attr];
    } else if (typeof element.currentStyle != 'undefined') { //IE下獲得屬性的方法
        value = element.currentStyle[attr];
    }
    return value;
 
}

四，效果圖    

 當(dāng)鼠標(biāo)移入圖片內(nèi)，移入的該張圖片進(jìn)行寬度增加，透明度增加，其他幾張寬度稍微變小一點(diǎn)，如圖：

這樣，整個過程的滑動就實(shí)現(xiàn)了圖片的聯(lián)動效果，看起來很漂亮。