原生JavaScript实现的无缝滚动功能详解
本文实例讲述了原生JavaScript实现的无缝滚动功能。分享给大家供大家参考,具体如下:
无缝轮播(原生JavaScript)
一:HTML部分:
<
本文实例讲述了原生JavaScript实现的无缝滚动功能。分享给大家供大家参考,具体如下:
无缝轮播(原生JavaScript)
<
varGLOBAL={}; //定义命名空间函数 GLOBAL.namespace=function(str){ vararr=str.split("."), o=GLOBAL; for(i=(arr[0]==="GLOBAL")?1:0;i3.2完美运动框架部分代码:
functiongetStyle(obj,attr){ returnobj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]; } functionstartMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ varbStop=true;//这一次运动结束——————所有值都到达了 for(varattrinjson){ //1.取当前的值 variCur=0; if(attr=='opacity'){ variCur=parseInt(parseFloat(getStyle(obj,attr))*100); } else{ variCur=parseInt(getStyle(obj,attr)); } //2.计算速度 variSpeed=(json[attr]-iCur)/6; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //3.检测停止 if(iCur!=json[attr]){ bStop=false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else{ obj.style[attr]=iCur+iSpeed+'px'; } } if(bStop){ clearInterval(obj.timer); if(fn){ fn(); } } },30); }3.3page.js(实现功能部分)
(function(){ varoBox=document.getElementById('box'); varoXSlide=GLOBAL.Dom.getElementsByClassName('J_XSlide',oBox)[0]; varli=oXSlide.getElementsByTagName('li'); varliTabs=GLOBAL.Dom.getElementsByClassName('tabs',oBox)[0].getElementsByTagName('li'); variNow=0; functiontab(){ vartimer=null; varplayTime=3000; varbtn=GLOBAL.Dom.getElementsByClassName('btn',oBox); oXSlide.style.width=li.length*li[0].offsetWidth+'px'; for(vari=0,len=liTabs.length;i更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。