1. 爱易网页
  2. JavaSript
  3. 请问一个jquery多行滚动效果的有关问题

请问一个jquery多行滚动效果的有关问题

日期：2014-05-16　 浏览次数：20495 次

请教一个jquery多行滚动效果的问题
下面是我写的一个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.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多行滚动</title>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
li {
height:20px;
}
</style>
</head>
<body>
<script type="text/javascript">
// 多行滚动
jQuery.fn.extend({
  marquee:function(opt){
  if(!opt)
var opt={};
var ul=this.find("ul:first");
var lineHeight=ul.find("li:first").height();
var lines=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10);
var speed=opt.speed?parseInt(opt.speed,10):1000; //卷动速度，数值越大，速度越慢（毫秒）
var li=ul.find("li");
var liSize=ul.find("li").size();
this.css({overflow:"hidden"});
  ul.css({margin:"0",padding:"0","list-style":"none"});
  li.css({margin:"0",padding:"0","list-style":"none"});
this.css({"height":(lineHeight*lines)+"px"});
  ul.css("height",(lineHeight*liSize)+"px");
ul.append(li.slice(0,lines).clone())
//滚动动画
var upHeight=0-liSize*lineHeight;
scrollUp=function(){
ul.animate({
marginTop:upHeight
},speed*liSize,function(){
ul.css({marginTop:0});
});
}
//scrollUp();
setInterval("scrollUp()",speed);
//循环滚动,且当鼠标到达时停止滚动
/*ul.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",speed);
});*/

  }
})

</script>
<!-- 多行滚动 -->
<div id="scrollDiv">
  <ul>
  <li>这是公告标题的第一行</li>
  <li>这是公告标题的第二行</li>
  <li>这是公告标题的第三行</li>
  <li>这是公告标题的第四行</li>
  <li>这是公告标题的第五行</li>
  <li>这是公告标题的第六行</li>
  <li>这是公告标题的第七行</li>
  <li>这是公告标题的第八行</li>
  </ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
//$('#scrollDiv').a();
$('#scrollDiv').marquee({line:5,speed:200});
})
</script>
</body>
</html>

------解决方案--------------------
纯粹帮顶，呵呵
------解决方案--------------------
HTML code
<!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=utf-8" />
<title>多行滚动</title>
<head>
    <script type="text/jscript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
li {
height:20px;
}
</style>
</head>
<body>
<script type="text/javascript">
// 多行滚动
jQuery.fn.extend({
  marquee:function(opt){
  if(!opt)
var opt={};
var ul=this.find("ul:first");
var lineHeight=ul.find("l

相关资料更多>

  1. 新鲜出炉的3D相册，javascript版本，ipad下感觉良好，全浏览器兼容（包括IE，可惜低版本无3D效果）
  2. 当点击某一行中某一个单元格的超链接时，使该行改变颜色？该怎么处理
  3. 生手求讲解。
  4. JavaScript false、0值、null、undefined和空字符串对象
  5. 一个关于jquery选择器的有关问题
  6. 几种盛行的AJAX框架jQuery MiniUI、Ext JS的对比
  7. 帮忙看下JQuery这个,该如何解决
  8. jstl中的判断list中是不是包含某个值
  9. jquery和JavaScript的js验证的有关问题