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如何实现中奖信息无间隙滚动效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    文章名称:js如何实现中奖信息无间隙滚动效果
    本文网址:http://bzwzjz.com/article/pgcsis.html

    其他资讯

    Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
    友情链接: 温江网站设计 手机网站制作 重庆网站设计 成都网站建设 高端网站设计 网站建设改版 成都网站建设公司 成都网站设计公司 营销型网站建设 手机网站制作 泸州网站建设 成都网站设计制作公司 企业网站设计 重庆网站制作 成都网站建设 定制网站制作 成都网站建设公司 企业网站制作 网站制作 成都网站设计公司 定制级高端网站建设 移动网站建设