三.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)，如圖：

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

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。