javascript经典特效分享 手风琴、轮播图、图片滑动(2)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴</title> <style> .showBox{ width: 660px; overflow: hidden; } ul{ list-style: none; margin: 0; padding: 0; width: 30000px; } ul li.active{ width: 550px; } ul li{ float: left; position: relative; height: 254px; width: 22px; overflow: hidden; } ul li img{ width: 660px; height: 254px; } ul li span{ width: 22px; position: absolute; top: 0; left: 0; height: 204px; padding-top: 50px; } ul li span.bg1{ background: #333; } ul li span.bg2{ background: #0f0; } ul li span.bg3{ background: #ff7500; } ul li span.bg4{ background: #0ff; } ul li span.bg5{ background: #00f; } </style> <script type="text/javascript"> window.onload=function () { createAccordion('.showBox'); }; function createAccordion(name) { /*获取元素*/ var oDiv=document.querySelector(name); /*声明最小宽度*/ var iMinWidth=9999999; /*获取元素*/ var aLi=oDiv.getElementsByTagName('li'); var aSpan=oDiv.getElementsByTagName('span'); /*定时器容器默认*/ oDiv.timer=null; /*循环添加事件和自定义属性索引值*/ for(vari=0;i<aSpan.length;i++) { aSpan[i].index=i; aSpan[i].onmouseover=function () { gotoImg(oDiv, this.index, iMinWidth); }; /*获取最小宽度*/ iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth); } }; function gotoImg(oDiv, iIndex, iMinWidth) { if(oDiv.timer) { /*清除定时器,避免叠加*/ clearInterval(oDiv.timer); } /*开启定时器*/ oDiv.timer=setInterval ( function () { changeWidthInner(oDiv, iIndex, iMinWidth); }, 30 ); } /*这里是关键,运动*/ function changeWidthInner(oDiv, iIndex, iMinWidth) { var aLi=oDiv.getElementsByTagName('li'); var aSpan=oDiv.getElementsByTagName('span'); /*获取盒子的大小,这个是总宽度*/ var iWidth=oDiv.offsetWidth; /*缩进去的图片的宽度声明*/ var w=0; /*判断的声明,为了清除定时器声明*/ var bEnd=true; /*循环为了把每个图片都循环一遍,为了获取伸进和缩去的元素*/ for(var i=0;i<aLi.length;i++) { /*这为获取伸进的索引*/ if(i==iIndex) { continue; } /*这里是没有变动的元素,所以都保存最小宽度*/ if(iMinWidth==aLi[i].offsetWidth) { /*总宽度减去这些宽度,因为他们也在总宽度里*/ iWidth-=iMinWidth; continue; } /*走以下的循环里代码的是缩去的元素*/ /*不清除定时器,还没运动完*/ bEnd=false; /*获取速度,先快后慢*/ speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10); /*缩去剩下的宽度*/ w=aLi[i].offsetWidth-speed; /*为避免缩去元素小于最小宽度*/ if(w<=iMinWidth) { w=iMinWidth; } /*设置缩去元素的宽度*/ aLi[i].style.width=w+'px'; /*减去缩去的宽度,剩下的就是伸进的宽度*/ iWidth-=w; } /*伸进元素的宽度*/ aLi[iIndex].style.width=iWidth+'px'; if(bEnd) { clearInterval(oDiv.timer); oDiv.timer=null; } } </script> </head> <body> <div> <ul> <li><span>这是第一个</span><img src="https://www.jb51.net/article/1.jpg" alt=""></li> <li><span>这是第二个</span><img src="https://www.jb51.net/article/2.jpeg" alt=""></li> <li><span>这是第三个</span><img src="https://www.jb51.net/article/3.jpg" alt=""></li> <li><span>这是第四个</span><img src="https://www.jb51.net/article/4.jpg" alt=""></li> <li><span>这是第五个</span><img src="https://www.jb51.net/article/5.jpg" alt=""></li> </ul> </div> </body> </html>

接下来的都是会使用到动画效果,既然这样就把封装好运动: 

javascript经典特效分享 手风琴、轮播图、图片滑动

/*使用调用,obj对象,attr属性,speed速度,iTarget想达到的值,fn回调函数*/ /*因为运动基本都是px为单位的,至于透明度是没有单位,所以在这里把它分开了, 其实也没有怎么改,就是判断是不是透明度这个属性,然后走透明度这条线 */ function doMove(obj,attr,speed,iTarget,fn){ if(attr=="opacity"){ obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100; }else{ obj.len=iTarget-parseFloat(getStyle(obj,attr)); } /*这里判断方向,在初始点后的为负数,在初始点前为正数*/ speed=obj.len>0?speed:-speed; clearInterval(obj.timer); obj.timer=setInterval(function(){ if(!obj.num){ obj.num=0; } if(attr=="opacity"){ obj.num=parseFloat(getStyle(obj,attr))*100+speed; }else{ obj.num=parseInt(getStyle(obj,attr))+speed; } /*这里是判断到了目标点没有,到了就停止定时器*/ if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){ obj.num=iTarget; clearInterval(obj.timer); } if(attr=="opacity"){ obj.style[attr]=obj.num/100; }else{ obj.style[attr]=obj.num+"px"; } /*因为放在上面无法实现到回调函数的完整作用,出现一些BUG*/ if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){ fn && fn(); } },30); } /*获取css属性值的,会获取表现出现的值*/ function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; }

轮播图: 

javascript经典特效分享 手风琴、轮播图、图片滑动

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjxsy.html