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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
phpwind放自动注册方法
Dec 02 Javascript
js图片自动切换效果处理代码
May 07 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
删除节点的jquery代码
Jan 13 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
用VsCode编辑TypeScript的实现方法
May 07 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 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP中文编码小技巧
2014/12/25 PHP
php实现word转html的方法
2016/01/22 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
《记承天寺夜游》教学反思
2014/02/16 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
余世维讲座观后感
2015/06/11 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书