一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]


Posted in Javascript onDecember 01, 2016

网上找了很多,万变不离其宗,写法核心都是一样的,在这里我给大家总结一下,可收藏备用。

html:

<div class="scroll">
 <ul class="list">
  <li><a href="#" target="_blank">公告一 或 中奖者 甲</a></li>
  <li><a href="#" target="_blank">公告二 或 中奖者 乙</a></li>
  <li><a href="#" target="_blank">公告三 或 中奖者 丙</a></li>
 </ul>
</div>

解析:适用于只有一行显示的公告类,以及展示中奖名单/抽奖结果等大框类,改变list高度即可

方案一:

function autoScroll(obj) {
 $(obj).find(".list").animate({
  marginTop: "-25px"
 }, 1000, function () {
  $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
 })
}
var timer = setInterval('autoScroll(".scroll")', 1000);
$(function () {
 $(".scroll").hover(function () {
  clearInterval(timer);
 }, function () {
  timer = setInterval('autoScroll(".scroll")', 1000);
 })
})

方案二:

function autoScroll(obj) {
 //var _t;
 function scroll() {
  $(obj).find(".list").animate({
   marginTop: "-25px"
  }, 500, function () {
   $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
  })
 }
 var timer = setInterval(scroll, 2800);
 $(obj).hover(
  function () {
   clearInterval(_t);
  },
  function () {
   timer = setInterval(scroll, 2800);
  }
 )
}
$(function () {
 autoScroll(".scroll");
})

解析:两种方案实现的功能是一样的,都是通过改变margin-top的值,把第一个再添加到最后一个来实现的。第一种直接写出运行步骤,定时器可以定义在加载函数的外面,也可写在里面,但是以下的内容必须写在加载函数的里面,否则不能正常执行。

    如果整体又定义为一个函数,则下面要在加载函数里调用一次函数,即可执行。

    在hover事件中的回调函数,必须写timer=setInterval(),指定时器重新赋值给timer,直接写setInterval不起作用,如果写var timer=setInterval();则又重新定义了一个timer,同样不起作用。

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

Javascript 相关文章推荐
javascript dom追加内容实现示例
Sep 21 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
jQuery中ajax错误调试分析
Dec 01 #Javascript
JQuery学习总结【二】
Dec 01 #Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 #Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
Vue方法与事件处理器详解
Dec 01 #Javascript
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
jsp 自动编译机制详细介绍
Dec 01 #Javascript
You might like
PHP 调试工具Debug Tools
2011/04/30 PHP
js获取单选按钮的数据
2006/11/27 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
Python 音频生成器的实现示例
2019/12/24 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python如何发送与接收大型数组
2020/08/07 Python
Python txt文件如何转换成字典
2020/11/03 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
建设单位项目负责人任命书
2014/06/06 职场文书
教师求职信
2014/06/17 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
python获取字符串中的email
2022/03/31 Python
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js