新闻滚动代码

来源：互联网发布：纸箱设计软件编辑：程序博客网时间：2024/06/06 12:32

CSS代码

ul,li{margin:0;padding:0}#scrollDiv{width:400px;height:200px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}#scrollDiv li{height:25px;padding-left:10px;}

JS 代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script><script type="text/javascript">//滚动插件(function($){$.fn.extend({        Scroll:function(opt,callback){                //参数初始化                if(!opt) var opt={};                var _this=this.eq(0).find("ul:first");                var lineH=_this.find("li:first").height(), //获取行高                        line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度                        speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）                        timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）                if(line==0) line=1;                var upHeight=0-line*lineH;                //滚动函数                scrollUp=function(){                        _this.animate({                                marginTop:upHeight                        },speed,function(){                                for(i=1;i<=line;i++){                                        _this.find("li:first").appendTo(_this);                                }                                _this.css({marginTop:0});                        });                }                //鼠标事件绑定                _this.hover(function(){                        clearInterval(timerID);                },function(){                        timerID=setInterval("scrollUp()",timer);                }).mouseout();        }        })})(jQuery);$(document).ready(function(){        $("#scrollDiv").Scroll({line:4,speed:2000,timer:4500});});</script>

HTML代码

<!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=gb2312" /><title>多行滚动jQuery循环新闻列表代码</title></head><body><p>多行滚动演示：</p><div id="scrollDiv">  <ul>    <li>新闻列表的第1行  2013年4月19日 17:46:37</li>    <li>新闻列表的第2行  2013年4月19日 17:46:37</li>    <li>新闻列表的第3行  2013年4月19日 17:46:37</li>    <li>新闻列表的第4行  2013年4月19日 17:46:37</li>    <li>新闻列表的第5行  2013年4月19日 17:46:37</li>　　<li>新闻列表的第6行  2013年4月19日 17:46:37</li>　　<li>新闻列表的第7行  2013年4月19日 17:46:37</li>　　<li>新闻列表的第8行  2013年4月19日 17:46:37</li>  </ul></div></body></html>

0 0