div+css+js無縫滾動代碼

先了解一下對象的幾個的屬性：

innerHTML:設置或獲取位於對象起始和結束標籤內的 HTML

scrollHeight: 獲取對象的滾動 高度。

scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離

scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離

scrollWidth:獲取對象的滾動 寬度

offsetHeight:獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度

offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置

offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置

offsetWidth:獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的寬度

DIV + JS 圖片上無縫滾動

view source

print?

01	<style type="text/<A title=css href="http://blog.suiyiidan.cn" target=_blank>css</A>">

02

<!--

03

#demo {

04	background: #FFF;

05	overflow:hidden;

06	border: 1px dashed #CCC;

07	height: 100px;

08	text-align: center;

09	float: left;

10

}

11	#demo img {

12	border: 3px solid #F2F2F2;

13	display: block;

14

}

15

-->

16

</style>

17	向上<STRONG style="BACKGROUND-COLOR: #ff66ff; COLOR: black">滾動</STRONG>

18

19

20	<<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

21

22	id="demo">

23	<<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

24

25	id="demo1">

26	<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

27	<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

28	<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

29	<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

30	<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

31	</<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

32

33

>

34	<<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

35

36	id="demo2"></<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

37

38

>

39	</<STRONG style="BACKGROUND-COLOR: #99ff99; COLOR: black">div</STRONG>

40

41

>

42

<script>

43

<!--

44	var speed=10; //數字越大速度越慢

45	var tab=document.getElementById("demo");

46	var tab1=document.getElementById("demo1");

47	var tab2=document.getElementById("demo2");

48	tab2.innerHTML=tab1.innerHTML; //克隆demo1爲demo2

49	function Marquee(){

50	if(tab2.offsetTop-tab.scrollTop<=0)//當<STRONG style="BACKGROUND-COLOR: #ff66ff; COLOR: black">滾動</STRONG>

51

52	至demo1與demo2交界時

53	tab.scrollTop-=tab1.offsetHeight //demo跳到最頂端

54

else{

55	tab.scrollTop++

56

}

57

}

58	var MyMar=setInterval(Marquee,speed);

59	tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠標移上時清除定時器達到<STRONG style="BACKGROUND-COLOR: #ff66ff; COLOR: black">滾動</STRONG>

60

61

停止的目的

62	tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠標移開時重設定時器

63

-->

64

</script>

 這是代碼，也很容易明白，如果向右或者向左，只要改動想關的參數就可以

本文出自web前端開發