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

網(wǎng)上下載了一個(gè)Jquery新聞滾動(dòng)Demo，效果不錯(cuò)。我根據(jù)自己情況，做了些調(diào)整。

下載后，除了Html及Jquery.js,還有三個(gè)文件，分別是Css,主Js和一個(gè)定位Js（jquery.dimensions.js），Css文件完全可以通過動(dòng)態(tài)賦值實(shí)現(xiàn)，省的在Css文件中添加了，況且可以重定義，應(yīng)該效果更好。

定位Js只用到一個(gè)方法，我把它整合到之中了，少加載一個(gè)是一個(gè)么。

原Demo是一行顯示的滾動(dòng)效果，有一個(gè)Bug，即不等的多行顯示時(shí)會(huì)跑錯(cuò)，已修復(fù)。

原Demo有一個(gè)mouseover屬性，我一般不用（效果不好，看一下實(shí)現(xiàn)方法也有漏洞，在多行時(shí)效果更差），刪除了。

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

刪除的部分：

$('> 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、滾動(dòng)新聞，滾動(dòng)新聞，滾動(dòng)新聞，滾動(dòng)新聞，滾動(dòng)新聞</li>

 <li>2、滾動(dòng)新聞，滾動(dòng)新聞</li>

 <li>3、滾動(dòng)新聞，滾動(dòng)新聞，滾動(dòng)新聞，滾動(dòng)新聞</li>

 <li>4、滾動(dòng)新聞，滾動(dòng)新聞，滾動(dòng)新聞，滾動(dòng)新聞，滾動(dòng)新聞</li>

 <li>5、滾動(dòng)新聞</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)容，希望對大家的學(xué)習(xí)有所幫助