JS實現(xiàn)排行榜文字向上滾動輪播效果
更新時間：2019年11月26日 14:26:31 作者：liu1007735214
這篇文章主要為大家詳細介紹了JS實現(xiàn)排行榜文字向上滾動輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近在一個抽獎活動中需要在頁面上對中獎名單做排行榜的輪播，故根據(jù)下面的簡單列子修改實現(xiàn)了滾動效果。
效果圖(文字向上輪播)：
demo如下：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="關(guān)鍵字1,關(guān)鍵字2" />
<meta name="Description" content="描述信息" />
<title>循環(huán)滾動</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元優(yōu)惠券<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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了JavaScript中的原型和原型鏈，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了微信小程序背景音樂開發(fā)詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
最近在搞一個網(wǎng)站,需要在內(nèi)容區(qū)域?qū)崿F(xiàn)劃詞高亮功能,所以下面這篇文章主要給大家介紹了關(guān)于如何用純JS實現(xiàn)語雀的劃詞高亮功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
本文主要介紹了原生js實現(xiàn)彈出層效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
javascript+jQuery實現(xiàn)360開機時間顯示效果
這篇文章主要介紹了javascript+jQuery實現(xiàn)360開機時間顯示效果，在文中給大家提到了js實現(xiàn)時間倒計時的代碼，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了JS對圖片進行黑白化的實現(xiàn)代碼,需要的朋友可以參考下2018-04-04
這篇文章詳細介紹了js兼容的placeholder屬性，有需要的朋友可以參考一下2013-08-08
WebGL 透明處理方式之一是使用 α 混合，這篇文章主要介紹了JavaScript?WebGL?圖片透明處理方式,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解
今天小編就為大家分享一篇對Layer彈窗使用及返回數(shù)據(jù)接收的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
大家都喜歡用innerHTML添加內(nèi)容，但是innerHTML這東西在兩大陣營中有許多不同。2010-02-02