图片无缝滚动代码向左

	小涛 @Ta
	2015-08-19 08:45

---

                  by:小涛

想必大家都注意到marquee的不循环滚动,所以出现了很多替代脚本，接下来为大家详细介绍下：向左滚动/图片左无缝滚动
在原作者的基础上做了一定修改，主要还是在样式上面，将表格更换为标签。并且将JavaScript标准化，可以在所有浏览器运行。 

先了解一下对象的几个的属性： innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度 。
代码如下

图片左无缝滚动 
<style type=“text/css“> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
width: 500px; 
} 
#demo img { 
border: 3px solid #F2F2F2; 
} 
#indemo { 
float: left; 
width: 800%; 
} 
#demo1 { 
float: left; 
} 
#demo2 { 
float: left; 
} 
--> 
</style> 
向左滚动 
<div id=“demo“> 
<div id=“indemo“> 
<div id=“demo1
“> 
<a href=“#“><img src=“http://www.cnrui.cn/other/link/Clear_logo.gif“ border=“0“ /></a> 
<a href=“#“><img src=“http://www.cnrui.cn/other/link/Clear_logo.gif“ border=“0“ /></a> 
<a href=“#“><img src=“http://www.cnrui.cn/other/link/Clear_logo.gif“ border=“0“ /></a> 
<a href=“#“><img src=“http://www.cnrui.cn/other/link/Clear_logo.gif“ border=“0“ /></a> 
<a href=“#“><img src=“http://www.cnrui.cn/other/link/Clear_logo.gif“ border=“0“ /></a> 
<a href=“#“><img src=“http://www.cnrui.cn/other/link/Clear_logo.gif“ border=“0“ /></a> 
</div> 
<div id=“demo2“></div> 
</div> 
</div> 
<script> 
<!-- 
var speed=10; //数字越大速度越慢 
var tab=document.getElementById(“demo“); 
var tab1=document.getElementById(“demo1“); 
var tab2=document.getElementById(“demo2“); 
tab2.innerHTML=tab1.innerHTML; 
function Marquee(){ 
if(tab2.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> 

阅:2476

发表于2015-08-19 08:45

#其他教程