纯js实现手风琴效果代码

我知道现在大多数前端开发人员都在使用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 （） {//干掉所有人 让所有人的宽度 渐渐地 变为100for （var j = 0; j < lis.length; j++） {animate（lis[j], {"width": 100}）;}//留下我自己 让我的宽度 渐渐地 变为800animate（this, {"width": 800}）;};}//鼠标离开box 所有的li宽度 渐渐地 变为240box.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来开发，可是作为一个真正的前端技术人员，你要时刻了解底层代码的实现，这样随着科技的发展，你也不会落于人后。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。