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 相关文章推荐
纯js分页代码(简洁实用)
Nov 05 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
web打印小结
Jan 11 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
Javascript获取某个月的天数
May 30 Javascript
微信小程序支付前端源码
Aug 29 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 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垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
brook javascript框架介绍
2011/10/10 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
js中的闭包学习心得
2018/02/06 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python3 处理JSON的实例详解
2017/10/29 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python实现密码强度校验
2020/03/18 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
绘画专业自荐信
2014/07/04 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
政协委员个人总结
2015/03/03 职场文书
卡特教练观后感
2015/06/08 职场文书