js不間斷滾動的簡單教程

2022-03-27 04:33:04 字數 2642 閱讀 1292

內容不間斷向左滾動,相當於不斷向右移動滾動條,內容向左滾動。

要點一:scrollleft    

使用: id.scrollleft

例如下面的簡單的例子,當文字向左滾動的時候,就可以看到滾動條在向右移動

要點二:setinterval      

使用:var timer = setinterval(func,100);

每隔多長時間,執行一次

要點三:offsetwidth     物件的可見寬度,包括滾動條等邊線,會隨視窗的顯示大小改變

要點四:innerhtml  設定或獲取位於物件起始和結束標籤內的html

內容1內容2內容3內容4內容5內容6內容7

說明:讓box的scrollleft++,就可以向左滾動。要做到一直不間斷向左滾動,需要做判斷,如果scrollleft的值等於或大於c2的寬度時,把scrollleft的值設為0,這樣就會一直迴圈。

把id為c1的內容賦予c2,這樣可以在滾動的時候肉眼就會看不到變化

現在已經可以滾動了,下面加上滑鼠移上滾動停止,滑鼠移出,滾動繼續的效果。

現在是向左滾動,如果向右滾動,可以用如下**

if(a.scrollleft <= 0)else

當元素左滾動距離小於0時,讓他的左滾動距離為一半的寬度,否則讓左滾動的值--

要點五:clearinterval   取消由 setinterval() 設定的 timeout

c1.onmouseover = function()

c1.onmouseout = function()

在上面的**中現加上這兩行,就可以滑鼠移上停止滾動,滑鼠移出滾動繼續了。

雖然有點囉嗦,但是現在可以實現控制左右無縫滾動的效果了,

>無標題文件

title

>

<

style

>

body,div

body

#box

#c#c1,#c2

#prev,#next

.wrap

style

>

head

>

<

body

>

<

div

class

="wrap"

>

<

div

id="prev"

><

<

>

<

div

id="box"

>

<

div

id="c"

>

<

div

id="c1"

>內容1內容2內容3內容4內容5內容6內容7

div>

<

div

id="c2"

>

div>

div>

div>

<

div

id="next"

>>>

div>

div>

<

script

>

varc1

=document.getelementbyid("c1

");varc2

=document.getelementbyid("c2

");vara

=document.getelementbyid(

"box");

varprev

=document.getelementbyid(

"prev");

varnext

=document.getelementbyid(

"next");

vartimer ;

c2.innerhtml

=c1.innerhtml;

function

scroll_l()

else

}function

scroll_r()

else

}timer

=setinterval(scroll_l,

60);

a.onmouseover

=function

()a.onmouseout

=function

()prev.onclick

=function

()next.onclick

=function

()function

change(r)}if

(r==1)

}}script

>

body

>

html

>

MSClass 通用不間斷滾動JS封裝類

更新說明 加入功能 修正 完善 1.65.071228 橫向 縱向滾動格式調整 解決橫向滾動換行的問題,無需特殊設定 徹底解決由於ie問題導致上下滾動頁面留白的問題 本次更新主要解決此問題,感謝天上的書生參與測試 1.6.070131 禁止滑鼠控制暫停或繼續 將第9個引數設定為 1或者動態賦值將sc...

nginx的平滑公升級,不間斷服務

開始之前先檢視一下當前使用的版本。root localhost ps ef grep nginx root 21196 1 0 23 40 00 00 00 nginx master process usr sbin nginx c etc nginx nginx.conf nginx 21197 ...

如何控制UPS不間斷電源的溫度

ups不間斷電源,是一種含有儲能裝置,以逆變器為主要組成部分的恆壓恆頻的不間斷電源。它主要作用是為單台計算機 計算機網路系統或其它電子裝置提供不間斷的電力 當市電輸入正常時,不間斷電源將市電穩壓後提供負載使用,此時的不間斷電源就相當於是一台交流市電穩壓器。不間斷電源是能夠提供持續 穩定 不間斷的電源...