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 相关文章推荐
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
JQuery触发事件例如click
Sep 11 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 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 api函数实现数组的交换排序示例
2014/04/13 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php 使用array函数实现分页
2015/02/13 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
python实现beta分布概率密度函数的方法
2019/07/08 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
python绘制动态曲线教程
2020/02/24 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
基于python实现地址和经纬度转换
2020/05/19 Python
印度在线购物网站:Paytmmall
2019/07/24 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
计算机专业自我鉴定
2013/10/15 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
人代会标语
2014/06/30 职场文书
工作失职检讨书500字
2014/10/17 职场文书
2015年资料员工作总结
2015/04/25 职场文书
机器人瓦力观后感
2015/06/12 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP