徹底搞懂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)//當滾動至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)}//鼠標移上時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠標移開時重設(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)//當滾動至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)}//鼠標移上時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠標移開時重設(shè)定時器
</script>
復(fù)制到一個HTM的文件即可運行了.
相關(guān)文章
微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解
這篇文章主要為大家介紹了微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-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 
javascript 動態(tài)修改樣式和層疊樣式表代碼
javascript 動態(tài)修改樣式和層疊樣式表代碼,需要的朋友可以參考下。
2010-04-04