js實現圖片聯動效果

一.實現理論基礎：

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

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

 （3）使用回調函數，實現鏈式動畫（就是寬度值增大到目的值，然后繼續寬度值減小的變化）；

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

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

     (5)使用一個標志位flag，來控制當所有的動畫效果都已經完成才清除此次動畫效果的定時器，否則繼續進行定時器的操作，完成動畫效果。

二．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實現

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);
 
    }
 
    //鼠標移出list區域，圖片回到初始時的寬度200
 
    list.addEventListener("mouseout", function () {
        for (var i = 0; i < list.children.length; i++) {
            startMove(list.children[i], {
                "width": "200",
                "opacity": "70"
            }, 50);
        }
    }, false);
 
 
    //當鼠標移過圖片時，讓焦點沒在其他圖片上的圖片寬度變為100px,透明度變為0.7，而鼠標移動到的那張圖片寬度變為600
 
    function change(obj) {
 
        var children = obj.parentNode.children; //為了獲得其他img的兄弟節點   
 
        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));
            }
        }; 
    }
 
}
//進行js運動效果的函數
 function startMove(obj, json, interval, fn) {
    clearInterval(obj.timer); //該對象每次開始動畫，都先停止掉正在進行的計數器,以免發生計數器運動速度會不斷增快的效果。
    var flag; //用來表示所有運動是否到達目標值
    //開啟定時器，每隔Interval時間段執行相應動作
    
    obj.timer = setInterval(function () {
        flag = true; //進入定時器時,現將flag設置為所有的屬性都已達到目標值
        //獲取傳過來的Json值（需要變化的屬性，因為要同時執行多屬性，所以這里使用了json傳值）。
        for (var attr in json) {
 
            var curr = 0;//用來獲得當下的屬性值
            //判斷所傳遞的屬性是否為透明度
            if (attr == 'opacity') { //如果是透明度，則獲取該對象此刻的透明度值
 
                curr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else { //否則，獲取該屬性的當下其他屬性值
                curr = parseInt(getStyle(obj, attr));
            }
            //進行運動的速度處理
            var speed = 0;
            speed = (json[attr] - curr) / 10; //每次速度變化的增量，每次實時的獲得，可以達到變速運動
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //速度增量大于0，向上取整，速度增量小于0,向下取整
            if (curr != json[attr]) { //當隨著屬性值還不等于要達到的目標值，就將flag設置為false;
                flag = false;
            }
            //進行運動變化
            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,說明傳來的屬性值，都已經變化到目標值，就可以清除計數器，
            //同時在檢查是否有回調函數傳入,若有就繼續執行回調函數。
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, interval);
}
//獲得樣式函數 
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;
 
}

四，效果圖    

 當鼠標移入圖片內，移入的該張圖片進行寬度增加，透明度增加，其他幾張寬度稍微變小一點，如圖：

這樣，整個過程的滑動就實現了圖片的聯動效果，看起來很漂亮。