我知道現在大多數前端開發人員都在使用jQuery等第三方的庫來進行開發，這不僅節約了時間，也讓效率大大的提高，並讓公司的效益增加，何樂而不為呢？
但是，這也會有一定的缺點，比如jQ比js慢，尤其在大型項目中就會顯現出來，下面我用原生js實現一個簡單的手風琴效果效果。
HTML代碼如下
結構非常簡單就5個li盒子，js代碼會渲染圖片上去
<!DOCTYPE html>
<html>
<head lang="en">
<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.length; i++) {
lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//給每一個li注冊鼠標經過事件 鼠標經過後要排他
lis[i].onmouseover = function () {
//干掉所有人 讓所有人的寬度 漸漸地 變為100
for (var j = 0; j < lis.length; j++) {
animate(lis[j], {"width": 100});
}
//留下我自己 讓我的寬度 漸漸地 變為800
animate(this, {"width": 800});
};
}
//鼠標離開box 所有的li寬度 漸漸地 變為240
box.onmouseout = function () {
for (var i = 0; i < lis.length; i++) {
animate(lis[i], {"width": 240});
}
};
//jQuery中有animate動畫函數，下面是實現的原理，雖然沒有jQ的強大，但是基本的效果實現還是沒有問題的
function animate(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//先假設 這一次執行完 所有的屬性都到達目標了
var flag = true;
for (var k in json) {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
//if (leader === target) {
// clearInterval(obj.timer);
//}
console.log("代碼還在運行");
if (leader != target) {
flag = false;//告訴標記 當前這個屬性還沒到達
}
}
//如果此時仍然為true 就說明真的都到達了
if (flag) {
clearInterval(obj.timer);
}
}, 15);
}
//全部屬性都到達目標值才能清空
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
上面就是所有的代碼，你可以找五張圖片試一試。
實際開發中效率還是最重要的，因為現在浏覽器的性能已經非常好了，所以jQ的有些缺點完全可以忽略不計啦，並且jQ的兼容性真的是不錯的，能節省開發人員很多的時間和精力，我也很支持在工作項目中用jQ來開發，可是作為一個真正的前端技術人員，你要時刻了解底層代碼的實現，這樣隨著科技的發展，你也不會落於人後。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。