js脚本教程102：js不间断滚动图片或文字实例

1、 DOM Element 对象常用属性和方法

element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth返回元素的整体宽度。

element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。

2、js不间断滚动图片实例

a、CSS样式

<style type="text/css">
/* CSS Document */
body{ font-size:12px; color:#333; margin:0px; padding:0px; line-height:22px; }
ul{ margin:0px; padding:0px; list-style:none;}
form{ padding:0px; margin:0px;}
h1{ text-align:center;}
img{ border:0px;}
.clear{ clear:both;}

#demo { background:none; overflow:hidden; width: 560px; height:128px; margin:auto;}
#demo ul{ padding-left:10px; padding-top:5px;}
#demo li{ float:left; width:128px; margin-left:10px; text-align:center;}

#demo img{ width:120px; height:100px;}
#indemo { float: left; width:3000%; }
#demo1 { float: left; }
#demo2 { float: left; }
< /style>

B、html代码

<h1>不间断滚动文字或图片效果</h1>
< div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><a href="#"><img src="images/3d/mm1.jpg" /></a><br /><a href="#">文字说明1</a></li>
<li><a href="#"><img src="images/3d/mm2.jpg" /></a><br /><a href="#">文字说明2</a></li>
<li><a href="#"><img src="images/3d/mm3.jpg" /></a><br /><a href="#">文字说明3</a></li>
<li><a href="#"><img src="images/3d/mm4.jpg" /></a><br /><a href="#">文字说明4</a></li>
<li><a href="#"><img src="images/3d/mm5.jpg" /></a><br /><a href="#">文字说明5</a></li>
</ul>
</div>
<div id="demo2"></div>
<div class="clear"></div>
</div>
< /div>

C、javascript脚本

<script type="text/javascript">
< !--
var speed=30; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab1.offsetWidth-tab.scrollLeft<=0)
{
tab.scrollLeft-=tab1.offsetWidth;
}
else
{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

-->
< /script>
< !---滚动图片结束-->