近日研究marquee无缝隙循环，有些心得
因为是初学JS 所以从网上找了不少别人的例子
我发现了一下问题
1.大多数html代码不符合W3C的最新标准。
2.很多代码移植性太差。
3.向左循环的时候。除用表格方式外，必须固定宽度，这样就不能动态的添加图片了。
基于以上我修改了代码但愿能给大家带来方便。
一、向左循环代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="demo" style="overflow:hidden;height:80px;width:200px;">
<div id="demo1" style="float:left;">
<img src="a.jpg" style="float:left;width:100px;"/>
<img src="b.jpg" style="float:left;width:100px;"/>
<img src="c.jpg" style="float:left;width:100px;"/>
<img src="d.jpg" style="float:left;width:100px;"/>
</div>
</div>
<script type="text/javascript">
var domo1 = document.getElementById("demo1");
var domo = document.getElementById("demo");
var imgs = domo1.getElementsByTagName("img");
var n = imgs.length;
var width = n * 100;
width = width + "px";
domo1.style.width = width;
alert(width);
var speed=30;
demo1.innerHTML=demo1.innerHTML+demo1.innerHTML;
function Marquee()
{
if(demo1.offsetWidth/2-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth/2;
}else
{
demo.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.οnmοuseοver=function(){clearInterval(MyMar)};
demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)};
</script>
</body>
</html>
二、向左循环(用表格布局)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table width="800px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td><DIV id=demo style="OVERFLOW: hidden; WIDTH:800px;TEXT-ALIGN:center;COLOR: #cccccc; HEIGHT: 90px">
<table border="0" align="left" cellPadding="0" cellspacing="0" cellspace="0">
<tr>
<td id=demo1 vAlign=top>
<table style="width:600px; height:90px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/pic/pic1.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic2.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic3.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic4.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic5.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic6.jpg" width="150px" height="113px"></td>
<td> </td>
<td><img src="images/pic/pic6.jpg" width="150px" height="113px"></td>
<td> </td>
</tr>
</table>
</td>
<td id=demo2 vAlign=top></td>
</tr>
</table>
</DIV>
<SCRIPT>
var speed=12
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetLeft-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</SCRIPT>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
三、向上循环（应为不考虑浮动的原因向上循环很简单）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id=demo style="overflow:hidden;height:200px;width:100px">
<div id=demo1>
<img src="a.jpg" width="100px"/>
<img src="b.jpg" width="100px"/>
<img src="c.jpg" width="100px"/>
<img src="d.jpg" width="100px"/>
</div>
<div id=demo2></div>
</div>
<script type="text/javascript">
var domo1 = document.getElementById("demo1");
var domo2 = document.getElementById("demo2");
var domo = document.getElementById("demo");
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee()
{
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function(){clearInterval(MyMar)}
demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
