jquery插件之文字间歇自动向上滚动效果代码


Posted in Javascript onFebruary 25, 2016

本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码。分享给大家供大家参考,具体如下:

此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续。整体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字间歇向上滚动</title>
<style>
*{margin:0;padding:0;font-size:12px;}
li{list-style:none;}
.box{margin:20px;width:320px;height:195px;border:1px solid #ddd;padding:5px 5px 10px;overflow:hidden;}
.box ul li{line-height:25px;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<div class="box">
 <ul>
  <li>01这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>02这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>03这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>04这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>05这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>06这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>07这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>08这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
  <li>09这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
 </ul>
</div>
<script>
/*
* textSlider 0.1
* Dependence jquery-1.7.1.js
*/
;(function($){
 $.fn.textSlider = function(options){
   var defaults = { //初始化参数
      scrollHeight:25,
      line:1,
      speed:'normal',
      timer:2000
   };
   var opts = $.extend(defaults,options);
   this.each(function(){
     var timerID;
     var obj = $(this);
     var $ul = obj.children("ul");
     var $height = $ul.find("li").height();
     var $Upheight = 0-opts.line*$height;
     obj.hover(function(){
       clearInterval(timerID);
     },function(){
       timerID = setInterval(moveUp,opts.timer);
       });
     function moveUp(){
       $ul.animate({"margin-top":$Upheight},opts.speed,function(){
          for(i=0;i<opts.line;i++){ //只有for循环了才可以设置一次滚动的行数
           $ul.find("li:first").appendTo($ul);
          }
         $ul.css("margin-top",0);
       });
     };
     timerID = setInterval(moveUp,opts.timer);
     });
   };
})(jQuery)
</script>
<script>
$(function(){
  $(".box").textSlider({
    line:2
    });
  })
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
js实现拖拽功能
Mar 01 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 #Javascript
利用jQuery中的ajax分页实现代码
Feb 25 #Javascript
Jquery zTree 树控件异步加载操作
Feb 25 #Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 #Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 #Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 #Javascript
jquery zTree异步加载简单实例讲解
Feb 25 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
理解JavaScript原型链
2016/10/25 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
新学期家长寄语
2014/01/19 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
项目建议书模板
2014/05/12 职场文书
个人求职信范文
2014/05/24 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
超市客服工作职责
2014/06/11 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
目标责任书格式范文
2015/05/11 职场文书
无保留意见审计报告
2015/06/05 职场文书
初中团委工作总结
2015/08/13 职场文书