徹底搞懂JS無縫滾動代碼
更新時間：2007年01月03日 00:00:00 作者：
在做個東西要滾動代碼 而且是無縫的 搞了半天還是不行
決心一定要把這個問題搞定 經過研究 也不難 代碼如下：
程序代碼
復制代碼 代碼如下:
<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)//設置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠標移上時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠標移開時重設定時器
</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)//設置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠標移上時清除定時器達到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠標移開時重設定時器
</script>
復制到一個HTM的文件即可運行了.
相關文章
微信小程序實現(xiàn)動態(tài)渲染Markdown示例詳解
這篇文章主要為大家介紹了微信小程序實現(xiàn)動態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這里給大家匯總了一些js實現(xiàn)刷新iframe框架的方法，非常的簡單實用，有需要的小伙伴可以參考下。2015-04-04
JS中使用sort結合localeCompare實現(xiàn)中文排序實例
這篇文章主要介紹了JS中使用sort結合localeCompare實現(xiàn)中文排序實例,重點介紹localeCompare函數(shù),需要的朋友可以參考下2014-07-07
BOM全稱是brower object model(瀏覽器對象模型)，主要用于管理窗口及窗口間的通訊，其核心對象是window。說窗口，可能并不準確。因為，有的瀏覽器窗口可能包含多個標簽頁，每個標簽頁都有自己的window對象。本文將詳細介紹這些內容，有需要可以參考學習。2016-08-08
詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權的實現(xiàn)
這篇文章主要介紹了詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權的實現(xiàn)的相關資料,需要的朋友可以參考下2017-03-03
在開發(fā)應用中，經常會遇到一些技術上的問題，比如：怎樣讓js在文本框光標處添加字符，本文將以此問題進行詳細介紹，需要了解的朋友可以參考下2012-11-11
這篇文章主要介紹了理解JavaScript設計模式中的建造者模式,文章基于JavaScript的相關資料展開箱子內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了JS閉包的學習心得，以及分析其中遇到的問題，需要的朋友跟著參考下吧。2018-04-04
這篇文章主要介紹了查找頁面中所有類為test結點的方法,需要的朋友可以參考下2014-03-03
javascript 動態(tài)修改樣式和層疊樣式表代碼
javascript 動態(tài)修改樣式和層疊樣式表代碼，需要的朋友可以參考下。2010-04-04