jQuery滚动新闻实现代码

前端技术 2023/09/02 JavaScript

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

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

本文地址：https://www.stayed.cn/item/4400

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案