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

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

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

请教一个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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>