jQuery滚动新闻实现代码

2019-11-20 09:36:05

字体：大中小

来源：转载

供稿：网友

     网上下载了一个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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JavaScript中Form表单技术汇总(推荐)

下一篇：js css实现垂直方向自适应的三角提示菜单