知识要点
1.实现原理:通过定时器不断改变列表的top值。而达到无间隙滚动就要对信息列表复制一份,再判断两个列表的top临界值初始化。最后注意的就是 防止动画积存需要对定时器进行清除。
2.用到的属性方法:
setInterval() //每隔一定时间执行一次函数,可以无限执行下去 clearInterval() //清除指定的setInterval setTimeout() //经过一定时间执行一次函数,只能执行一次,如果要无限下去需要在函数里自行设置 clearTimeout() //清除指定的setTimeout
剩下的就是一些基础的dom操作
完整代码
注:因为看到了天猫积分的抽奖页面所以想自己写试试,审查天猫代码看到原理是改变列表top值,无缝滚动是自己瞎琢磨的,估计应该有更高效的方法还请大神指教。。
demo body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} ul,ol{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:none;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} .clear{clear: both;float: none;height: 0;overflow: hidden;} .title{background: #D20F25; width: 200px; height: 40px; color: #fff; line-height: 40px;} .title p{margin-left: 30px;} #vip{background: #D20F25; width: 200px; height: 105px; color: #FF92AD; overflow: hidden; position: relative; } #list{position: absolute;} #vip li{ height: 50px; line-height: 24px; font-size: 12px; margin-left: 30px; } 会员中奖榜
- m**b
抽中18积分- 小**宫
抽中28积分- 金**告
抽中8积分- 真**生
抽中88积分- 郑**9
抽中18积分- l**美
抽中8积分
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持考高分网!



