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框架中DOMReady事件的实现小结
Feb 12 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php 保留小数点
2009/04/21 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
AngularJS下对数组的对比分析
2016/08/24 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
详细解读Python中的__init__()方法
2015/05/02 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
大型公益活动策划方案
2014/08/20 职场文书
司机岗位职责范本
2015/04/10 职场文书
班主任开场白
2015/06/01 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书