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部分:
<divid="tbNews">
<ul>
<li>1、滚动新闻，滚动新闻，滚动新闻，滚动新闻，滚动新闻</li>
<li>2、滚动新闻，滚动新闻</li>
<li>3、滚动新闻，滚动新闻，滚动新闻，滚动新闻</li>
<li>4、滚动新闻，滚动新闻，滚动新闻，滚动新闻，滚动新闻</li>
<li>5、滚动新闻</li>
</ul>
</div>
<scriptlanguage="JavaScript"src="jdNewsScroll.js"type="text/javascript">
</script>
<scriptdefer="defer"language="JavaScript"type="text/javascript">
$(function(){
$('#tbNews').jdNewsScroll({divWidth:130,divHeight:50,fontSize:'10.5pt'});
});
</script>
Js代码：
(function($){
varELMS=[];
$.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":"2px10px1px10px"});
$(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);
});
returnthis;
};
$.fn.jdNewsScroll.defaults={
beginTime:10,
fontSize:'9pt',
divWidth:'100%',
divHeight:'200px',
lineHeight:'130%',
delay:20,
step:2
};
$.fn.jdNewsScrollPause=function(pause){
returnthis.each(function(){
this.$pause=pause;
});
}
functionouterHeight(options){
if(!this[0])0;
options=$.extend({margin:false},options||{});
returnthis[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);
functionscroll(){
for(vari=0;i<ELMS.length;i++){
varelm=ELMS[i];
if(elm&&!elm.$pause){
if(elm.$counter==0){
varul=$('>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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。