內容不間斷向左滾動,相當於不斷向右移動滾動條,內容向左滾動。
要點一: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不間斷電源,是一種含有儲能裝置,以逆變器為主要組成部分的恆壓恆頻的不間斷電源。它主要作用是為單台計算機 計算機網路系統或其它電子裝置提供不間斷的電力 當市電輸入正常時,不間斷電源將市電穩壓後提供負載使用,此時的不間斷電源就相當於是一台交流市電穩壓器。不間斷電源是能夠提供持續 穩定 不間斷的電源...