jQuery滾動新聞實現(xiàn)代碼

更新時間：2016年06月26日 10:18:18 作者：leeeeleeee

這篇文章主要為大家詳細介紹了jQuery滾動新聞實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

     網(wǎng)上下載了一個Jquery新聞滾動Demo，效果不錯。我根據(jù)自己情況，做了些調(diào)整。
    下載后，除了Html及Jquery.js,還有三個文件，分別是Css,主Js和一個定位Js（jquery.dimensions.js），Css文件完全可以通過動態(tài)賦值實現(xiàn)，省的在Css文件中添加了，況且可以重定義，應該效果更好。
    定位Js只用到一個方法，我把它整合到之中了，少加載一個是一個么。
    原Demo是一行顯示的滾動效果，有一個Bug，即不等的多行顯示時會跑錯，已修復。
    原Demo有一個mouseover屬性，我一般不用（效果不好，看一下實現(xiàn)方法也有漏洞，在多行時效果更差），刪除了。

借鑒別人的思路與代碼，不敢獨享。

刪除的部分：

   $('> 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');
     }
    });

調(diào)整后代碼：

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: