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

 更新时间:2016年12月01日 16:22:33   作者:蓓蕾心晴  
本文主要介绍了非常好用的文字滚动的案例,鼠标悬浮可暂停的两种实现方案,代码简洁,可收藏备用。需要的朋友来看下吧

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

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,同样不起作用。

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

相关文章

  • layui 地区三级联动 form select 渲染的实例

    layui 地区三级联动 form select 渲染的实例

    今天小编就为大家分享一篇layui 地区三级联动 form select 渲染的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Raphael带文本标签可拖动的图形实现代码

    Raphael带文本标签可拖动的图形实现代码

    Javascript和Raphael顺便学习了一下,主要是为了实现一个可拖动的矩形同时矩形上还得显示标签,网上关于这方面的知识提的很是于是本人自不量力写了一下,感兴趣的你可不要错过了哈,希望可以帮助到你
    2013-02-02
  • JavaScript前端实现GIF图片循环播放

    JavaScript前端实现GIF图片循环播放

    使用 img 加载 GIF 图片,内容只会播放一次,之后就会自动暂停,所以这篇文章为大家介绍了如何使用JavaScript实现GIF图片循环播放吧
    2025-03-03
  • 如何利用Typescript封装本地存储

    如何利用Typescript封装本地存储

    这篇文章主要给大家介绍了关于如何利用Typescript封装本地存储的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • 微信小程序picker组件关于objectArray数据类型的绑定方法

    微信小程序picker组件关于objectArray数据类型的绑定方法

    这篇文章主要介绍了微信小程序picker组件关于objectArray数据类型的绑定方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • For循环中分号隔开的3部分的执行顺序探讨

    For循环中分号隔开的3部分的执行顺序探讨

    这篇文章主要探讨了For循环中分号隔开的3部分的执行顺序,需要的朋友可以参考下
    2014-05-05
  • DOM节点删除函数removeChild()用法实例

    DOM节点删除函数removeChild()用法实例

    这篇文章主要介绍了DOM节点删除函数removeChild()用法,实例分析了removeChild()函数实现结点删除的技巧,需要的朋友可以参考下
    2015-01-01
  • ES6 新增的创建数组的方法(小结)

    ES6 新增的创建数组的方法(小结)

    这篇文章主要介绍了ES6 新增的创建数组的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • js实现调用网络摄像头及常见错误处理

    js实现调用网络摄像头及常见错误处理

    这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 利用JS生成博文目录及CSS定制博客

    利用JS生成博文目录及CSS定制博客

    这篇文章主要介绍了利用JS生成博文目录及CSS定制博客的相关资料,需要的朋友可以参考下
    2016-02-02

最新评论