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 相关文章推荐
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
webpack构建react多页面应用详解
Sep 15 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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
多重?l件?合查?(二)
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
java直接调用python脚本的例子
2014/02/16 Python
python类的继承实例详解
2017/03/30 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
EJB实例的生命周期
2016/10/28 面试题
自我鉴定的范文
2013/10/03 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
测绘工程专业求职信
2014/07/15 职场文书
护士2014年终工作总结
2014/11/11 职场文书
2014年建筑工作总结
2014/11/26 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang