jQuery滚动新闻实现代码

     网上下载了一个Jquery新闻滚动Demo，效果不错。我根据自己情况，做了些调整。
    下载后，除了Html及Jquery.js,还有三个文件，分别是Css,主Js和一个定位Js（jquery.dimensions.js），Css文件完全可以通过动态赋值实现，省的在Css文件中添加了，况且可以重定义，应该效果更好。
    定位Js只用到一个方法，我把它整合到之中了，少加载一个是一个么。
    原Demo是一行显示的滚动效果，有一个Bug，即不等的多行显示时会跑错，已修复。
    原Demo有一个mouseover属性，我一般不用（效果不好，看一下实现方法也有漏洞，在多行时效果更差），删除了。
    借鉴别人的思路与代码，不敢独享。
删除的部分：

 $（"> ul", this）.bind（"mouseover", function（e） { if （$（e.target）.is（"li"）） {$（e.target）.addClass（"hover"）; }}）.bind（"mouseout", function（e） { if （$（e.target）.is（"li"）） {$（e.target）.removeClass（"hover"）; }}）;

调整后代码：
html部分:

<div id="tbNews"><ul> <li>1、滚动新闻，滚动新闻，滚动新闻，滚动新闻，滚动新闻</li> <li>2、滚动新闻，滚动新闻</li> <li>3、滚动新闻，滚动新闻，滚动新闻，滚动新闻</li> <li>4、滚动新闻，滚动新闻，滚动新闻，滚动新闻，滚动新闻</li> <li>5、滚动新闻</li></ul></div><script language="JavaScript" src="jdNewsScroll.js" type="text/javascript"></script><script defer="defer" language="JavaScript" type="text/javascript">$（function（） { $（"#tbNews"）.jdNewsScroll（{divWidth:130,divHeight:50,fontSize:"10.5pt"}）;}）;</script>

Js代码：

（function（$）{var ELMS = [];$.fn.jdNewsScroll = function（settings） {settings = $.extend（{}, arguments.callee.defaults, settings）; $（this）.css（{"position":"relative","overflow":"hidden","width":settings.divWidth,"height":settings.divHeight}）; $（this）.find（"ul"）.css（{"position":"relative","list-style-type":"none","font-size":settings.fontSize,"margin":"0px"}）; $（this）.find（"li"）.css（{"line-height":"130%","margin":"0px","padding":"2px 10px 1px 10px"}）;$（this）.each（function（）{ this.$settings = settings; this.$pause = false; this.$counter = settings.beginTime; $（this）.hover（function（）{ $（this）.jdNewsScrollPause（true） }, function（）{ $（this）.jdNewsScrollPause（false） }）; ELMS.push（this）;}）;return this; }; $.fn.jdNewsScroll.defaults = {beginTime: 10,fontSize: "9pt",divWidth: "100%",divHeight: "200px",lineHeight: "130%",delay:20,step: 2 }; $.fn.jdNewsScrollPause = function（pause） {return this.each（function（） { this.$pause = pause;}）; } function outerHeight（options） {if （！this[0]） 0;options = $.extend（{ margin: false }, options || {}）;return this[0] == window || this[0] == document ? this.height（） : this.is（":visible"） ?this[0].offsetHeight + （options.margin ? （num（this, "marginTop"） + num（this, "marginBottom"）） : 0） :this.height（）+ num（this,"borderTopWidth"） + num（this, "borderBottomWidth"）+ num（this, "paddingTop"） + num（this, "paddingBottom"） + （options.margin ? （num（this, "marginTop"） + num（this, "marginBottom"）） : 0）; } setInterval（scroll, 80）; function scroll（） {for （var i = 0; i < ELMS.length; i++） { var elm = ELMS[i]; if （elm && ！elm.$pause） {if （elm.$counter == 0） { var ul= $（"> ul", elm）[0]; if （！elm.$steps） {elm.$steps = $（"> li:first-child", ul）.outerHeight（）;elm.$step = 0; } if （（elm.$steps + elm.$step） <= 0） {elm.$counter= elm.$settings.delay;elm.$steps = false;$（ul）.css（"top", "0"）.find（"> li:last-child"）.after（$（"> li:first-child", ul））;$（"> *", ul）.not（"li"）.remove（）; } else {elm.$step -= elm.$settings.step;if （-elm.$step > elm.$steps） { elm.$step = -elm.$steps;}ul.style.top = elm.$step + "px"; }} else { elm.$counter--;} }} };}）（jQuery）;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。