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前端开发