徹底搞懂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的文件即可運行了.
相關(guān)文章
微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解
這篇文章主要為大家介紹了微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這里給大家匯總了一些js實現(xiàn)刷新iframe框架的方法，非常的簡單實用，有需要的小伙伴可以參考下。2015-04-04
BOM全稱是brower object model(瀏覽器對象模型)，主要用于管理窗口及窗口間的通訊，其核心對象是window。說窗口，可能并不準(zhǔn)確。因為，有的瀏覽器窗口可能包含多個標(biāo)簽頁，每個標(biāo)簽頁都有自己的window對象。本文將詳細(xì)介紹這些內(nèi)容，有需要可以參考學(xué)習(xí)。
2016-08-08 
詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實現(xiàn)
這篇文章主要介紹了詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2017-03-03 
js實現(xiàn)在文本框光標(biāo)處添加字符的方法介紹
在開發(fā)應(yīng)用中，經(jīng)常會遇到一些技術(shù)上的問題，比如：怎樣讓js在文本框光標(biāo)處添加字符，本文將以此問題進(jìn)行詳細(xì)介紹，需要了解的朋友可以參考下
2012-11-11 
這篇文章主要介紹了理解JavaScript設(shè)計模式中的建造者模式,文章基于JavaScript的相關(guān)資料展開箱子內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-04-04 
這篇文章主要介紹了JS閉包的學(xué)習(xí)心得，以及分析其中遇到的問題，需要的朋友跟著參考下吧。
2018-04-04 
這篇文章主要介紹了查找頁面中所有類為test結(jié)點的方法,需要的朋友可以參考下
2014-03-03 
javascript 動態(tài)修改樣式和層疊樣式表代碼
javascript 動態(tài)修改樣式和層疊樣式表代碼，需要的朋友可以參考下。
2010-04-04