基于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 原型学习总结
Oct 29 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
Angular表单验证实例详解
Oct 20 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 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
Search Engine Friendly的URL设计
2006/10/09 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
Python 错误和异常小结
2013/10/09 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python之Character string(实例讲解)
2017/09/25 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python机器学习库xgboost的使用
2020/01/20 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
单位人事专员介绍信
2014/01/11 职场文书
高中生物教学反思
2014/02/05 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
教师培训学习心得体会
2016/01/21 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang