<!doctype html>
<head><title>Scroll it</title>
<style type="text/css">
#demo{overflow:hidden;width:600px;height:200px;align=center}
#picList ul,#picList2{float:left;width:1200px;border:2px solid silver}
#picList ul,#picList2 ul{list-style:none;}
#picList ul li,#picList ul li{float:left;}
#picList ul li a,#picList ul li a:visited {text-decoration:none;display:block;}
#picList2 ul li a,#picList2 ul li a:visited {text-decoration:none;display:block;}
#picList ul li a:hover{width:210px;height:190px;border:2px solid #00ddff;}
#picList ul li a img{border:none;width:200px;height:180px}
#picList2 ul li a:hover{width:210px;height:190px;border:2px solid #ddf;}
#picList2 ul li a img{border:none;width:200px;height:180px}
.clear{clear:both;width:0;height:0;}
</style>
</head>
</body>
<form>
<div id="demo">
<div id="picList">
<ul>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
</ul>
</div>
<div id="picList2"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<head><title>Scroll it</title>
<style type="text/css">
#demo{overflow:hidden;width:600px;height:200px;align=center}
#picList ul,#picList2{float:left;width:1200px;border:2px solid silver}
#picList ul,#picList2 ul{list-style:none;}
#picList ul li,#picList ul li{float:left;}
#picList ul li a,#picList ul li a:visited {text-decoration:none;display:block;}
#picList2 ul li a,#picList2 ul li a:visited {text-decoration:none;display:block;}
#picList ul li a:hover{width:210px;height:190px;border:2px solid #00ddff;}
#picList ul li a img{border:none;width:200px;height:180px}
#picList2 ul li a:hover{width:210px;height:190px;border:2px solid #ddf;}
#picList2 ul li a img{border:none;width:200px;height:180px}
.clear{clear:both;width:0;height:0;}
</style>
</head>
</body>
<form>
<div id="demo">
<div id="picList">
<ul>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
<li><a href="#" target="new"><img src="image/iecool002.gif" /></a></li>
</ul>
</div>
<div id="picList2"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<script type="text/javascript">
var speed=30 ;
picList2.innerHTML=picList.innerHTML;
function Marquee(){
if(demo.scrollLeft>=picList.scrollWidth){
demo.scrollLeft=0;
}
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>
</form>
</body></html>
2190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
