快捷導(dǎo)航

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

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

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

本文實(shí)例為大家分享了js文字列表無縫滾動(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)}

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

您可能感興趣的文章:

相關(guān)文章

JS 毫秒轉(zhuǎn)時(shí)間示例代碼
毫秒轉(zhuǎn)時(shí)間的方法有很多，在本文將為大家介紹下js中是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下
2013-09-09
JS觸摸事件、手勢(shì)事件詳解
本篇文章主要介紹了JS觸摸事件、手勢(shì)事件詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組按照倒序排列的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)字?jǐn)?shù)組按照倒序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
微信小程序?qū)崿F(xiàn)評(píng)價(jià)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)評(píng)價(jià)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
js判斷一個(gè)對(duì)象是數(shù)組（函數(shù)）的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于利用js如何判斷一個(gè)對(duì)象是數(shù)組（函數(shù)）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
html判斷當(dāng)前頁面是否在iframe中的實(shí)例
下面小編就為大家?guī)硪黄猦tml判斷當(dāng)前頁面是否在iframe中的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
淺談JavaScript中內(nèi)存泄漏的幾種情況
本文主要介紹了淺談JavaScript中內(nèi)存泄漏的幾種情況，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
javascript實(shí)現(xiàn)的元素拖動(dòng)函數(shù)宿主為瀏覽器
這篇文章主要介紹了javascript實(shí)現(xiàn)的元素拖動(dòng)，將相應(yīng)的元素對(duì)象的引用傳到函數(shù)中
2014-07-07
JavaScript實(shí)現(xiàn)簡易加法計(jì)算器
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡易加法計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
js模擬實(shí)現(xiàn)煙花特效
這篇文章主要為大家詳細(xì)介紹了js模擬實(shí)現(xiàn)煙花特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03