您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关JS怎么实现排行榜文字向上滚动轮播效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
最近在一个抽奖活动中需要在页面上对中奖名单做排行榜的轮播，故根据下面的简单列子修改实现了滚动效果。
效果图(文字向上轮播)：
demo如下：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="关键字1,关键字2" />
<meta name="Description" content="描述信息" />
<title>循环滚动</title>
<!--CSS/JS-->
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;display:block;}
#scrollBox{height:150px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}
#scrollBox #con1,#con2{width:280px;float:left;}
#scrollBox li{height:15px;line-height:15px;text-align:center;}
</style>
</head>
<body>
<!--div-->
<div id="scrollBox">
<ul id="con1">
<li>李华 中了10块钱<li>
<li>Leo 中了一个手机<li>
<li>刘明 中了一块毛巾<li>
<li>ll 中了保温杯<li>
<li>nice 中了100块钱红包<li>
<li>108 中了20元优惠券<li>
<li>ok 中了100块钱<li>
</ul>
<ul id="con2"></ul>
</div>
<script type="text/javascript">
var area =document.getElementById('scrollBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
function scrollUp(){
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}else{
area.scrollTop++
}
}
var time = 50;
var mytimer=setInterval(scrollUp,time);
area.οnmοuseοver=function(){
clearInterval(mytimer);
}
area.οnmοuseοut=function(){
mytimer=setInterval(scrollUp,time);
}
</script>
</body>
</html>关于“JS怎么实现排行榜文字向上滚动轮播效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。