徹底搞懂JS無縫滾動代碼
更新時間：2007年01月03日 00:00:00 作者：
在做個東西要滾動代碼 而且是無縫的 搞了半天還是不行
決心一定要把這個問題搞定 經(jīng)過研究 也不難 代碼如下：
程序代碼
復(fù)制代碼 代碼如下:
<div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600>
<table align=top>
<tr>
<td id=demo1 valign=top>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
</td>
</tr>
<tr>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML//克隆demo1為demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//當(dāng)滾動至demo1與demo2交界時
demo.scrollTop-=demo1.offsetHeight//demo跳到最頂端
else{
demo.scrollTop++ //如果是橫向的 將 所有的 height top 改成 width left
}
}
var MyMar=setInterval(Marquee,speed)//設(shè)置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠標(biāo)移上時清除定時器達(dá)到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠標(biāo)移開時重設(shè)定時器
</script>
<table align=top>
<tr>
<td id=demo1 valign=top>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
</td>
</tr>
<tr>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=15
demo2.innerHTML=demo1.innerHTML//克隆demo1為demo2
function Marquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//當(dāng)滾動至demo1與demo2交界時
demo.scrollTop-=demo1.offsetHeight//demo跳到最頂端
else{
demo.scrollTop++ //如果是橫向的 將 所有的 height top 改成 width left
}
}
var MyMar=setInterval(Marquee,speed)//設(shè)置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠標(biāo)移上時清除定時器達(dá)到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠標(biāo)移開時重設(shè)定時器
</script>
復(fù)制到一個HTM的文件即可運(yùn)行了.
相關(guān)文章
xWin之JS版(2-26更新)...2007-01-01
JS定時檢測任務(wù)任務(wù)完成后執(zhí)行下一步的解決辦法
這篇文章主要介紹了JS定時檢測任務(wù)任務(wù)完成后執(zhí)行下一步的解決辦法,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了js定時器實(shí)現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
JS復(fù)制對應(yīng)id的內(nèi)容到粘貼板（Ctrl+C效果）
這篇文章主要給大家介紹了利用JS實(shí)現(xiàn)復(fù)制指定對應(yīng)id的內(nèi)容到粘貼板（Ctrl+C效果）,文中給出了詳細(xì)的介紹和示例代碼，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
快速解決js中window.location.href不工作的問題
下面小編就為大家?guī)硪黄焖俳鉀Qjs中window.location.href不工作的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JavaScript實(shí)現(xiàn)簡易登錄注冊頁面
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易登錄注冊頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下<BR>2022-01-01
uniapp獲取當(dāng)前位置及檢測授權(quán)狀態(tài)效果
這篇文章主要介紹了uniapp獲取當(dāng)前位置及檢測授權(quán)狀態(tài)效果,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了微信小程序 參數(shù)傳遞實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
js+css實(shí)現(xiàn)三級導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)三級導(dǎo)航菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08