JS实现排行榜文字向上滚动轮播效果
更新时间：2019年11月26日 14:26:31 作者：liu1007735214
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了JavaScript中的原型和原型链，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了微信小程序背景音乐开发详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最近在搞一个网站,需要在内容区域实现划词高亮功能,所以下面这篇文章主要给大家介绍了关于如何用纯JS实现语雀的划词高亮功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
本文主要介绍了原生js实现弹出层效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
javascript+jQuery实现360开机时间显示效果
这篇文章主要介绍了javascript+jQuery实现360开机时间显示效果，在文中给大家提到了js实现时间倒计时的代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了JS对图片进行黑白化的实现代码,需要的朋友可以参考下2018-04-04
这篇文章详细介绍了js兼容的placeholder属性，有需要的朋友可以参考一下2013-08-08
WebGL 透明处理方式之一是使用 α 混合，这篇文章主要介绍了JavaScript WebGL 图片透明处理方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
今天小编就为大家分享一篇对Layer弹窗使用及返回数据接收的实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
大家都喜欢用innerHTML添加内容，但是innerHTML这东西在两大阵营中有许多不同。2010-02-02
最新评论