纯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来开发,可是作为一个真正的前端技术人员,你要时刻了解底层代码的实现,这样随着科技的发展,你也不会落于人后。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。