JQuery rolling news implementation code and jquery rolling news code

JQuery rolling news implementation code and jquery rolling news code

I downloaded a Jquery news rolling Demo on the Internet, which has good results. I made some adjustments based on my own situation.
After the download, except for Html and Jquery. js, there are three files, Css, main Js, and a positioning Js (jquery. dimensions. js), Css files can be fully implemented through dynamic assignment, saving the addition of Css files, and can be redefined, which should be better.
Positioning Js only uses one method. I have integrated it into it. Is it possible to load less than one method.
The original Demo shows the scroll effect of one row. There is a Bug, that is, when multiple lines of different display will run an error, which has been fixed.
The original Demo has a mouseover attribute, which is generally not used (the effect is poor. Check whether the implementation method has a vulnerability and the effect is worse when multiple rows exist.

I do not dare to share the ideas and codes of others.

Deleted parts:

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

Adjusted code:

Html section:

<Div id = "tbNews"> <ul> <li> 1. rolling news, and rolling news, rolling news </li> <li> 2. rolling news, rolling news </li> <li> 3. rolling news, rolling news, and rolling news, rolling news </li> <li> 4. rolling news, and rolling news, rolling news </li> <li> 5. rolling news </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 Code:

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

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.