代码改变世界

缝滚动实例--左右滚动

2011-01-04 14:00  ※森林小居※  阅读(201)  评论(0)    收藏  举报

<html> 
<head> 
<title>无缝滚动实例--左右滚动</title> 
<style type="text/css"> 
img { border:none; margin:0px; }  
#demo { width:600px; overflow:hidden; height:120px; border:solid 3px red; }  
#demo1 { float:left; width:766px; }  
#demo2 { float:left; width:766px; }  
 
#clear { clear:both; }  
</style> 
</head> 
 
<body> 
<div id="demo"> 
<div id="marquee"> 
   <div id="demo1"> 
   <img src="images/js01.jpg" width="120" height="120" /> 
    <img src="images/js02.jpg" width="120" height="120" /> 
    <img src="images/js03.jpg" width="120" height="120" /> 
    <img src="images/js04.jpg" width="120" height="120" /> 
    <img src="images/js05.jpg" width="120" height="120" /> 
    <img src="images/js06.jpg" width="120" height="120" /> 
   </div> 
 
 <div id="demo2"></div> 
</div> 
</div> 
 
<div id="clear">&nbsp;</div> 
<script type="text/javascript"> 
var speed = 80;  
var demo = document.getElementById("demo");  
var demo1= document.getElementById("demo1");  
var demo2= document.getElementById("demo2");  
var marquee = document.getElementById("marquee");  
 
demo2.innerHTML = demo1.innerHTML;  
marquee.style.width = demo1.offsetWidth * 2;  
function fMarquee()  
{  
if(demo2.offsetWidth - demo.scrollLeft <= 0) { demo.scrollLeft -= demo2.offsetWidth; }  
else { demo.scrollLeft++; }  
}  
var myMarquee = setInterval(fMarquee,speed);  
demo.onmouseover = function() { clearInterval(myMarquee); }  
demo.onmouseout = function() { myMarquee = setInterval(fMarquee, speed); }  
</script> 
</body> 
 
</html>