jQuery滚动新闻实现代码

 更新时间:2016年06月26日 10:18:18   作者:leeeeleeee  
这篇文章主要为大家详细介绍了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);

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

相关文章

  • jquery增加和删除元素的方法

    jquery增加和删除元素的方法

    这篇文章主要介绍了jquery增加和删除元素的方法,涉及append、remove等方法的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery 核心函数以及jQuery对象

    jQuery 核心函数以及jQuery对象

    首先介绍 jQuery 的几个核心函数,在 jQuery 中它们起着至关重要的作用,在实际的前端开发过程中用到最多的也是它们。
    2010-03-03
  • jquery+css实现侧边导航栏效果

    jquery+css实现侧边导航栏效果

    这篇文章主要为大家详细介绍了jquery+css实现侧边导航栏效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • jQuery使用$.ajax提交表单完整实例

    jQuery使用$.ajax提交表单完整实例

    这篇文章主要介绍了jQuery使用$.ajax提交表单的方法,以完整实例形式分析了jQuery基于ajax数据提交的具体步骤与数据处理技巧,非常简单实用,代码备有详尽的注释便于理解,需要的朋友可以参考下
    2015-12-12
  • jQuery 3.0十大新特性最终版发布

    jQuery 3.0十大新特性最终版发布

    jQuery 3.0在日前发布了最终的全新版本。这篇文章主要介绍了jQuery 3.0十大新特性最终版发布的相关资料,需要的朋友可以参考下
    2016-07-07
  • JavaScript的jQuery库插件的简要开发指南

    JavaScript的jQuery库插件的简要开发指南

    这篇文章主要介绍了JavaScript的jQuery库插件的简要开发指南,分为基于选择器的插件和不基于选择器的插件两种情况,需要的朋友可以参考下
    2015-08-08
  • jQuery实现发送验证码控制按钮禁用功能

    jQuery实现发送验证码控制按钮禁用功能

    最近接到新需求,需要实现一个点击发送验证码之后,按钮禁用,在5秒之后取消禁用,看似需求很简单,实现起来还真的好好动动脑筋,下面小编把jquery控制按钮禁用核心代码分享给大家,需要的朋友参考下吧
    2021-07-07
  • jQuery仿Excel表格编辑功能的实现代码

    jQuery仿Excel表格编辑功能的实现代码

    Handsontable 是一个相当给力的 jQuery 插件,它实现了 HTML 页面中的表格编辑功能,并且是仿 Excel 的编辑效果。
    2013-05-05
  • jQuery实现百度登录框的动态切换效果

    jQuery实现百度登录框的动态切换效果

    这篇文章主要介绍了jQuery实现百度登录框的动态切换效果,需要的朋友可以参考下
    2017-04-04
  • jquery 单引号和双引号的区别及使用注意

    jquery 单引号和双引号的区别及使用注意

    在js中单引号和双引号都是一样的,平时使用的时候尽量用单引号,只有碰到嵌套的时候才会同时用两种引号,感兴趣的朋友可以了解下
    2013-07-07

最新评论