纯js实现手风琴效果代码
我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发，这不仅节约了时间，也让效率大大的提高，并让公司的效益增加，何乐而不为呢？
但是，这也会有一定的缺点，比如jQ比js慢，尤其在大型项目中就会显现出来，下面我用原生js实现一个简单的手风琴效果效果。
HTML代码如下
结构非常简单就5个li盒子，js代码会渲染图片上去
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> </head> <body> <divid="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:50pxauto;
border:1pxsolidred;
overflow:hidden;
}
divli{
width:240px;
height:400px;
float:left;
/*background-image:url(images/1.jpg);*/
}
divul{
width:1300px;
}
下面是重头戏啦，请欣赏原生js（相信很多人都快忘了原生js吧）
//找人
varbox=document.getElementById("box");
varul=box.children[0];
varlis=ul.children;
//循环遍历lis绑定背景图
for(vari=0;i<lis.length;i++){
lis[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
//给每一个li注册鼠标经过事件鼠标经过后要排他
lis[i].onmouseover=function(){
//干掉所有人让所有人的宽度渐渐地变为100
for(varj=0;j<lis.length;j++){
animate(lis[j],{"width":100});
}
//留下我自己让我的宽度渐渐地变为800
animate(this,{"width":800});
};
}
//鼠标离开box所有的li宽度渐渐地变为240
box.onmouseout=function(){
for(vari=0;i<lis.length;i++){
animate(lis[i],{"width":240});
}
};
//jQuery中有animate动画函数，下面是实现的原理，虽然没有jQ的强大，但是基本的效果实现还是没有问题的
functionanimate(obj,json){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//先假设这一次执行完所有的属性都到达目标了
varflag=true;
for(varkinjson){
varleader=parseInt(getStyle(obj,k))||0;
vartarget=json[k];
varstep=(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);
}
//全部属性都到达目标值才能清空
functiongetStyle(obj,attr){
if(window.getComputedStyle){
returnwindow.getComputedStyle(obj,null)[attr];
}else{
returnobj.currentStyle[attr];
}
}
上面就是所有的代码，你可以找五张图片试一试。
实际开发中效率还是最重要的，因为现在浏览器的性能已经非常好了，所以jQ的有些缺点完全可以忽略不计啦，并且jQ的兼容性真的是不错的，能节省开发人员很多的时间和精力，我也很支持在工作项目中用jQ来开发，可是作为一个真正的前端技术人员，你要时刻了解底层代码的实现，这样随着科技的发展，你也不会落于人后。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。