jQuery滚动新闻实现代码


Posted in Javascript onJune 26, 2016

     网上下载了一个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 相关文章推荐
javascript中的变量是传值还是传址的?
Apr 19 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
Javascript文本框脚本实现方法解析
Oct 30 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 #Javascript
JS中的进制转换以及作用
Jun 26 #Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 #Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 #Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 #Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 #Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 #Javascript
You might like
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
jquery对表单操作2
2011/04/06 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Django开发的简易留言板案例详解
2018/12/04 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
Python 代码调试技巧示例代码
2020/08/11 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
python中remove函数的踩坑记录
2021/01/04 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
美国网上花店:JustFlowers
2017/02/12 全球购物
群众路线表态发言材料
2014/10/17 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2014年评职称工作总结
2014/11/20 职场文书
班主任寄语2015
2015/02/26 职场文书
任命书格式范文
2015/09/22 职场文书