当前位置：
编程学习 >
JS >>
jquery 简单实用的无缝滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.zzzyk.com/1999/xhtml">
<head>
<title>简单实用的无缝滚动效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css教程">
*{font-size:12px;}
#mydiv ul{height:180px;overflow:hidden;margin:20px;background:#eee;width:300px}
#mydiv ul li{height:25px;line-height:25px;}
</style>
<script src="http://www.google.com/jsapi"></script>
<script language="javascript教程">
google.load("jquery", "1.3.1");
google.setOnLoadCallback(OnLoad);
function OnLoad(){
function giveInterval(funcName,time){var args=[];for(var i=2;i<arguments.length;i++){args.push(arguments[i]);}return window.setInterval(function(){funcName.apply(this,args);},time);}
function marquee(elem){
if(!elem.cloned){
elem.html(elem.html()+elem.html());
elem.cloned=1;
elem.Stop="go";
elem.hover(function(){elem.Stop="stop";},function(){elem.Stop="go"})
elem.pause=0;
}
var scrtop=elem.attr("scrollTop");
if(elem.pause!=0){
elem.pause--;
return;
}
if((scrtop)%100==0){
elem.pause=100;
}
if(elem.Stop=="stop")return
scrtop++;
elem.attr("scrollTop",scrtop);
if(elem.attr("scrollTop")>=elem.attr("scrollHeight")/2){
elem.attr("scrollTop",0);
scrtop=0;
}
}
giveInterval(marquee,10,jQuery("#mydiv ul"));
}
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div class="marquee&step=1&delay=10" id="mydiv">
<ul>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.zzzyk.com</a></li> </ul>
</div>
</body>
</html>
补充：网页制作,jquery
