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


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 相关文章推荐
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
微信小程序中转义字符的处理方法
Mar 28 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
微信小程序实现时间进度条功能
2020/11/17 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
python散点图实例之随机漫步
2018/08/27 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python属于解释语言吗
2020/06/11 Python
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
英文自荐信
2013/12/15 职场文书
初中音乐教学反思
2014/01/12 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
企业晚会策划方案
2014/05/29 职场文书
求职自我推荐信
2014/06/25 职场文书
暑假安全保证书
2015/02/28 职场文书
司机个人年终总结
2015/03/03 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL