微信点餐小程序_JS完成排行榜文字向上滚动轮播

日期:2021-01-06 类型:行业动态 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

JS实现排行榜文字向上滚动轮播效果       这篇文章主要为大家详细介绍了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 

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