基于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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 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
实用函数8
2007/11/08 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python常见异常分类与处理方法
2017/06/04 Python
python中 logging的使用详解
2017/10/25 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
如何安装ruby on rails
2014/02/09 面试题
区域销售经理职责
2013/12/22 职场文书
买房协议书范本
2014/10/23 职场文书
教师工作总结范文2014
2014/11/10 职场文书
八年级英语教学反思
2016/02/15 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL