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);

 

 

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值