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

 更新时间: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,同样不起作用。

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

相关文章

  • JS 实现10进制转换36进制的示例代码

    JS 实现10进制转换36进制的示例代码

    这篇文章主要介绍了JS实现10进制转换36进制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • JavaScript针对网页节点的增删改查用法实例

    JavaScript针对网页节点的增删改查用法实例

    这篇文章主要介绍了JavaScript针对网页节点的增删改查用法,实例分析了JavaScript操作网页节点的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • js 右下角弹窗效果代码(IE only)

    js 右下角弹窗效果代码(IE only)

    js 右下角弹窗效果代码,虽然IE only,但这个代码的逻辑可以参考下。了解下IE与firefox的区别,自己写个兼容的版本吧。
    2010-06-06
  • js中判断变量类型函数typeof的用法总结

    js中判断变量类型函数typeof的用法总结

    下面小编就为大家带来一篇js中判断变量类型函数typeof的用法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 利用js读取动态网站从服务器端返回的数据

    利用js读取动态网站从服务器端返回的数据

    这篇文章主要介绍了利用js读取动态网站从服务器端返回的数据,需要的朋友可以参考下
    2014-02-02
  • uniapp组件uni-popup弹出层的使用

    uniapp组件uni-popup弹出层的使用

    弹出层组件用于弹出一个覆盖到页面上的内容,本文主要介绍了uniapp组件uni-popup弹出层的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • JavaScript一文带你玩转web表单网页

    JavaScript一文带你玩转web表单网页

    表单通常用来收集网页访问者信息,常见的表单比如搜索引擎的搜索框、各网页应用的注册或者登陆界面等,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下
    2021-10-10
  • 基于require.js的使用(实例讲解)

    基于require.js的使用(实例讲解)

    下面小编就为大家带来一篇基于require.js的使用(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript实现简单的拖动效果

    JavaScript实现简单的拖动效果

    这篇文章主要为大家详细介绍了JavaScript实现简单的拖动效果,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-07-07
  • 弱类型语言javascript中 a,b 的运算实例小结

    弱类型语言javascript中 a,b 的运算实例小结

    这篇文章主要介绍了弱类型语言javascript中 a,b 的运算,结合实例形式总结分析了js闭包函数中布尔值与字符串的a,b运算相关操作技巧,需要的朋友可以参考下
    2019-08-08

最新评论