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

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

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

请教一个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. js脚本中编号的自动增加,该怎么解决
  2. 灵活的显示div层：根据当前位置onmouseover时向上、向下或向左向右显示,该如何解决
  3. Firefox 中的事件解决办法
  4. 【JSP】赵雅智_JSP自定义标签_容易标签
  5. jsp页面的跳转有关问题，关于定时器有关问题
  6. chrome上怎么用js设置cookie
  7. 关于超链接执行有关问题
  8. JQ DIV增加属性,该如何解决
  9. JS应用的有关问题