爱分享 jquery 简单实用的无缝滚动效果

最新推荐文章于 2023-07-24 15:51:51 发布

归档

最新推荐文章于 2023-07-24 15:51:51 发布

阅读量750

点赞数

文章标签：中国 class css xhtml javascript

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.php100.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.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li>
<li><a rel="bookmark" title="中国WEB第一站" href="#">start:www.php100.com</a></li> </ul>
</div>
</body>
</html>

转载请注明：爱分享 » jquery 简单实用的无缝滚动效果

http://www.ihref.com/read-12535.html

归档

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
爱分享 jquery 简单实用的无缝滚动效果

jquery 简单实用的无缝滚动效果简单实用的无缝滚动效果与之间–>*{font-size:12px;}#mydiv ul{height:180px;overflow:hidden;margin:20px;background:#eee;width:300px}#mydiv ul li{height:25px;line-height:25px;}
复制链接

扫一扫