純js程式碼實現手風琴特效-js教程-PHP中文網

純js程式碼實現手風琴特效

高洛峰

發布： 2016-10-12 09:29:33

原創

1541 人瀏覽過

我知道現在大多數前端開發人員都在使用jQuery等第三方的函式庫來進行開發，這不僅節省了時間，也讓效率大大的提高，並讓公司的效益增加，何樂而不為呢？

但是，這也會有一定的缺點，例如jQ比js慢，尤其在大型專案中就會顯現出來，下面我用原生js實現一個簡單的手風琴效果效果。

HTML程式碼如下

結構非常簡單就5個li盒子，js程式碼會渲染圖片上去

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

登入後複製

CSS程式碼如下：

寬高請自行設置，我之前做的這個專案圖片是1226*446的圖片，所以寬度和高度是按照當時做項目的時候設置的，如果你想放置其他尺寸的圖片請按照實際情況設施...

ul {
    list-style: none
}

* {
    margin: 0;
    padding: 0;
}

div {
    width: 1150px;
    height: 400px;
    margin: 50px auto;
    border: 1px solid red;
    overflow: hidden;
}

div li {
    width: 240px;
    height: 400px;
    float: left;
    /*background-image: url(images/1.jpg);*/
}

div ul {
    width: 1300px;

}

登入後複製

下面是重頭戲啦，請欣賞原生js（相信很多人都快忘了原生js吧）

//找人
var box = document.getElementById("box");
var ul = box.children[0];
var lis = ul.children;

//循環遍歷lis 綁定背景圖

for (var i = 0; i lis[i].style.backgroundImage = "url(images/" + (i + 1) + ". jpg)";

//給每個li註冊滑鼠經過事件滑鼠經過後要排他

lis[i].onmouseover = function () {

100

for (var j = 0; j animate(lis[j], {"width": 100} )   //留下我自己讓我的寬度漸漸地變成800

animate(this, {"width": 800});
};
}

//滑鼠離開片上 function {
for (var i = 0; i animate(lis[i], {"width": 240});
}
}; ，以下是實現的原理，雖然沒有jQ的強大，但是基本的效果實現還是沒有問題的

function animate(obj, json) { clearInterval(obj.timer);
. {

//先假設這次執行完所有的屬性都到達目標了

var flag = true;
le(obj, k)) || 0 ;
var target = json[k];
var step = (target - leader) / 10
;
leader = leader + step;
obj.style[k] = leader + "px";
//if (leader === target //}
console.log("程式碼仍在運作");
if (leader != target) {

flag = f   }

//如果此時仍為true 就表示真的都到達了

if (flag) {
clearInterval(obj.timer);
  }

function getStyle(obj, attr) {
if ( window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
} return

上面就是所有的程式碼，可以找五張圖片試試看。