快捷導(dǎo)航

js實(shí)現(xiàn)文字列表無(wú)縫滾動(dòng)效果

更新時(shí)間：2017年06月23日 16:02:33 作者：小太陽(yáng)zxr

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)文字列表無(wú)縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js文字列表無(wú)縫滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

HTML代碼：

<div id="rule">
    <div class="list" id="list">
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
     <p>用戶185****0000 獲得XXX優(yōu)惠券</p>
    </div>
  <div class="list2" id="list2"></div>
</div>

JavaScript代碼

var speed=50;
var list=document.getElementById('list');
var list2=document.getElementById('list2');
var rule=document.getElementById('rule');
list2.innerHTML=list.innerHTML;
function Marquee(){
 if(list2.offsetTop-rule.scrollTop<=0)
  rule.scrollTop-=list.offsetHeight;
 else{
  rule.scrollTop++;
 }
}
var MyMar=setInterval(Marquee,speed);
rule.onmouseover=function() {clearInterval(MyMar)}
rule.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序webview 腳手架使用詳解
這篇文章主要介紹了微信小程序webview 腳手架使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值
2019-07-07
Javascript JSQL，SQL無(wú)處不在，
上回說(shuō)到，操作Object Array
2010-05-05
Bootstrap Table使用整理（四）之工具欄
這篇文章主要介紹了Bootstrap Table使用整理（四）之工具欄的相關(guān)資料,需要的朋友可以參考下
2017-06-06
小程序Scroll-view上拉滾動(dòng)刷新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了小程序Scroll-view上拉滾動(dòng)刷新數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
JS實(shí)現(xiàn)選項(xiàng)卡效果的代碼實(shí)例
這篇文章主要介紹了JS選項(xiàng)卡效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
javascript中Math.random()使用詳解
Math.random() 這個(gè)方法相信大家都知道，是用來(lái)生成隨機(jī)數(shù)的。不過(guò)一般的參考手冊(cè)時(shí)卻沒(méi)有說(shuō)明如何用這個(gè)方法來(lái)生成指定范圍內(nèi)的隨機(jī)數(shù)。這次我就來(lái)詳細(xì)的介紹一下Math.random()，以及如何用它來(lái)生成制定范圍內(nèi)的隨機(jī)數(shù)。
2015-04-04
比例尺、縮略圖、平移縮放之百度地圖添加控件方法
這篇文章主要介紹了比例尺、縮略圖、平移縮放之百度地圖添加控件方法,大家都知道百度地圖API中提供了豐富的控件，您還可以通過(guò)Control類來(lái)實(shí)現(xiàn)自定義控件，需要的朋友可以參考下
2015-08-08
ES5 ES6中Array對(duì)象去除重復(fù)項(xiàng)的方法總結(jié)
這篇文章主要給大家介紹了Array對(duì)象去除重復(fù)項(xiàng)的相關(guān)資料，文中通過(guò)示例代碼詳細(xì)介紹了在ES5和ES6中Array對(duì)象去除重復(fù)項(xiàng)的方法，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-04-04
uniapp使用u-upload組件來(lái)實(shí)現(xiàn)圖片上傳功能
最近在用uniapp開(kāi)發(fā)微信小程序,下面這篇文章主要給大家介紹了關(guān)于uniapp使用u-upload組件來(lái)實(shí)現(xiàn)圖片上傳功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
js實(shí)現(xiàn)簡(jiǎn)單div拖拽功能實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單div拖拽功能的方法,實(shí)例分析了javascript針對(duì)div層拖拽的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-05-05