JS制御シームレスループ
4239 ワード
jsは写真の垂直シームレスな循環を実現します.
<html>
<head>
<title> </title>
</head>
<body>
<div id=demo style=overflow:hidden;height:100;width:180;>
<div id=demo1>
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
</div>
<div id=demo2></div>
</div>
<script>
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.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=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>
<title>javascript </title>
<meta charset="gb2312"/>
<style type="text/css">
#marquee ,#marquee li { padding:0px; margin:0px;}
#marquee { position:relative; list-style:none; height:150px; width:210px; padding-left:5px; overflow:hidden; border:10px solid #eee; }
#marquee li { position:absolute; font-size:12px;}
#marquee a { display:block; color:#999999; text-decoration:none;}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
speed = arguments[1] || 80, //
delta = 0,//
critical = slide.offsetHeight;//
slide.innerHTML += slide.innerHTML;
var rolling = function(){
delta == -critical ? delta = 0 : delta--;
slide.style.top = delta + "px";
}
var timer = setInterval(rolling,speed)//
container.onmouseover=function() {clearInterval(timer)}// marquee ， ，
container.onmouseout=function() {timer=setInterval(rolling,speed)}//
}
window.onload = function(){
Marquee("marquee");
}
</script>
</head>
<body>
<ul id="marquee">
<li>
<a href="#"> ， ， 。</a><br />
<a href="#"> ， 、 。</a><br />
<a href="#"> ， 。 ！</a><br />
<a href="#"> ， 、 。</a><br />
<a href="#"> ， ， ， ！</a><br />
<a href="#"> ， ， ， ！</a><br />
<a href="#"> ， ！</a><br />
</li>
</ul>
</body>
</html>