微客导航 » 文章资讯 » JS实现排行榜文字向上滚动轮播效果

JS实现排行榜文字向上滚动轮播效果

2023-08-07 09:22:04 162

最近在一个抽奖活动中需要在页面上对中奖名单做排行榜的轮播，故根据下面的简单列子修改实现了滚动效果。

效果图(文字向上轮播)：

demo如下：







循环滚动


*{margin:0;padding:0;}
ul,li{list-style:none;display:block;}
#scrollBox{height:150px;width:300px;margin:100pxauto;background:#f09;overflow:hidden;}
#scrollBox#con1,#con2{width:280px;float:left;}
#scrollBoxli{height:15px;line-height:15px;text-align:center;}








李华中了10块钱

Leo中了一个手机

刘明中了一块毛巾

ll中了保温杯

nice中了100块钱红包

108中了20元优惠券

ok中了100块钱

vararea=document.getElementById('scrollBox'); varcon1=document.getElementById('con1'); varcon2=document.getElementById('con2'); con2.innerHTML=con1.innerHTML; functionscrollUp(){ if(area.scrollTop>=con1.offsetHeight){ area.scrollTop=0; }else{ area.scrollTop++ } } vartime=50; varmytimer=setInterval(scrollUp,time); area.οnmοuseοver=function(){ clearInterval(mytimer); } area.οnmοuseοut=function(){ mytimer=setInterval(scrollUp,time); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JS实现排行榜文字向上滚动轮播效果

热门推荐

随机推荐