基于JQuery实现的跑马灯效果(文字无缝向上翻动)


Posted in Javascript onDecember 02, 2016
(function($){
 $.fn.extend({
 "slideUp":function(value){ 
  var docthis = this;
  //默认参数
  value=$.extend({
   "li_h":"30",
   "time":2000,
   "movetime":1000
  },value) 
  //向上滑动动画
  function autoani(){
  $("li:first",docthis).animate({"margin-top":-value.li_h},value.movetime,function(){
   $(this).css("margin-top",0).appendTo(".line");
  })
  }
  //自动间隔时间向上滑动
  var anifun = setInterval(autoani,value.time);
  
  //悬停时停止滑动,离开时继续执行
  $(docthis).hover(function(){
  clearInterval(anifun);  //清除自动滑动动画
  },function(){
  setInterval(autoani,value.time); //继续执行动画
  })
 } 
 })
})(jQuery)

    主要思路:

滑动动画,就是改变元素的位置,要改变元素的位置有两种方法,一种改变left,top属性(相对定位和绝对定位),还有一种,就是现在这里用到的,改变margin的值。

上例中动画过程:

1.设置要改变margin-top的值;

2.用animate方法改变第一个LI的margin-top的值为-30(负值会向上移动);

3.在动画完成之后,回调函数内,把当前的第一个LI的margin-top改变为"0"

4.把当前这第一个LI移动到所有LI的最后一个。(实现无缝)

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
javascript与webservice的通信实现代码
Dec 25 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 #Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 #Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 #Javascript
jQuery联动日历的实例解析
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 #Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 #Javascript
You might like
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
Python pass 语句使用示例
2014/03/11 Python
Python实现的Excel文件读写类
2015/07/30 Python
python re模块的高级用法详解
2018/06/06 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
档案检查欢迎词
2014/01/13 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
投资合作意向书范本
2015/05/08 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
九九重阳节致辞
2015/07/31 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
Redis全局ID生成器的实现
2022/06/05 Redis