css+div中实现无缝图片滚动代码
作者：××× 来源：本站 浏览： 添加日期：2010-5-17 22:23:08
以前经常使用table结果，图片无缝滚动的代码也特别多，但是如果在css+div中，我搜索了一堆，真正适合大多人使用，无非就是代码少，效果显著，我把我的总结给大家奉献出来，省的以后在去找，一个一个尝试。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<div id="imgbox" style="height:110px;width:600px;overflow:hidden;">
<div id="imgbox1" style="float:left;width:1000%">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
<img src="http://www.ccap168.cn/skin/skin/asp119.gif">
</div>
<div id="imgbox2" style="float:left" mce_style="float:left"></div>
</div>
<SCRIPT>
var speed=30;
var imgbox=document.getElementById("imgbox");
var imgbox1=document.getElementById("imgbox1");
var imgbox2=document.getElementById("imgbox2");
imgbox2.innerHTML=imgbox1.innerHTML;
function Marquee(){
if(imgbox2.offsetWidth-imgbox.scrollLeft<=0)
imgbox.scrollLeft-=imgbox1.offsetWidth;
else{
imgbox.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
imgbox.onmouseover=function(){clearInterval(MyMar)}
imgbox.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</SCRIPT>
</body>
</html>
IE8下测试正常，其他的没有测试。
- 上一篇文章: 暂时还没有
- 下一篇文章: 让PNG图片在各种浏览器下透明的方法
