jQuery滾動新聞實現代碼，jquery滾動新聞代碼

jQuery滾動新聞實現代碼，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);

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。