js如何实现中奖信息无间隙滚动效果-创新互联-新都图禾美页建站

新闻中心

这里有您想知道的互联网营销解决方案

js如何实现中奖信息无间隙滚动效果-创新互联

小编给大家分享一下js如何实现中奖信息无间隙滚动效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司专注于铜山网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供铜山营销型网站建设，铜山网站制作、铜山网页设计、铜山网站官网定制、小程序制作服务，打造铜山网络公司原创品牌,更为您提供铜山网站排名全网营销落地服务。

知识要点

1.实现原理：通过定时器不断改变列表的top值。而达到无间隙滚动就要对信息列表复制一份，再判断两个列表的top临界值初始化。最后注意的就是防止动画积存需要对定时器进行清除。

2.用到的属性方法：

setInterval() //每隔一定时间执行一次函数，可以无限执行下去
clearInterval() //清除指定的setInterval
setTimeout() //经过一定时间执行一次函数，只能执行一次，如果要无限下去需要在函数里自行设置
clearTimeout() //清除指定的setTimeout

剩下的就是一些基础的dom操作

完整代码

注：因为看到了天猫积分的抽奖页面所以想自己写试试，审查天猫代码看到原理是改变列表top值，无缝滚动是自己瞎琢磨的，估计应该有更高效的方法还请大神指教。。




demo

 

 会员中奖榜

m**b
抽中18积分

小**宫
抽中28积分

金**告
抽中8积分

真**生
抽中88积分

郑**9
抽中18积分

l**美
抽中8积分

//在页面加载完后立即执行多个函数方案 function addloadEvent(func){ var oldonload=window.onload; if(typeof window.onload !="function"){ window.onload=func; } else{ window.onload=function(){ if(oldonload){ oldonload(); } func(); } } } //在页面加载完后立即执行多个函数方案结束 addloadEvent(nes); function nes(){ //获取列表父容器 var vip=document.getElementById("vip"); //获取信息列表 var list=document.getElementById("list"); //创建第二个列表设置一系列样式id等 var list1=document.createElement("ul"); list1.setAttribute("id","list1"); //初始位置为300正好在第一个列表的下面 list1.style.top=300+"px"; list1.style.position="absolute"; //插入文档流 vip.appendChild(list1); //把第一个列表的结构内容复制给第二个 list1.innerHTML=list.innerHTML; //第一个列表 function b(){ //top值为当前的top减10 list.style.top=parseInt(list.style.top)-10+"px"; //如果top值为-300那么初始化top if(parseInt(list.style.top)==-300){ list.style.top=0; } //这里是实现间隔滚动判断 //当top值整除50(每个li的高度)时候清除定时器 if(parseInt(list.style.top)%50==0){ clearInterval(time); //然后两秒后再次执行time=setInterval se=setTimeout(function(){time=setInterval(b,30);},2000); } }; //定时器 time=setInterval(b,30); //第二个列表与第一个列表操作一样，只是修改了高度 function c(){ list1.style.top=parseInt(list1.style.top)-10+"px"; if(parseInt(list1.style.top)==0){ list1.style.top=300+"px"; } if(parseInt(list1.style.top)%50==0){ clearInterval(time1); se1=setTimeout(function(){time1=setInterval(c,30);},2000); } }; time1=setInterval(c,30); //鼠标移入列表时清除两个定时器 vip.onmouseover=function(){ clearTimeout(se); clearTimeout(se1); clearInterval(time); clearInterval(time1); }; //鼠标划出时先判断如果定时器在执行则清除 vip.onmouseout=function(){ if(time&&time1) { clearInterval(time); clearInterval(time1) } if(se&&se1) { clearTimeout(se); clearTimeout(se1) } //再次执行定时器 se=setTimeout(function(){time=setInterval(b,30);},2000); se1=setTimeout(function(){time1=setInterval(c,30);},2000); }; }

以上是“js如何实现中奖信息无间隙滚动效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：js如何实现中奖信息无间隙滚动效果-创新互联
文章地址：http://xdwzjz.cn/article/dsddei.html

新闻中心

其他资讯