純js程式碼實現手風琴特效
- 高洛峰原創
- 2016-10-12 09:29:331506瀏覽
我知道現在大多數前端開發人員都在使用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
上面就是所有的程式碼，可以找五張圖片試試看。