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 相关文章推荐
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
Node.js的特点详解
Feb 03 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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
PHP5 安装方法
2006/10/09 PHP
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
pandas分区间,算频率的实例
2019/07/04 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
《维生素c的故事》教学反思
2014/02/18 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
慈善晚会策划方案
2014/05/14 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
车间安全生产管理制度
2015/08/06 职场文书
预备党员入党感想
2015/08/10 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
Nginx如何配置根据路径转发详解
2022/07/23 Servers