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


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作一个通用向导说明
Aug 30 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
jquery插件validate验证的小例子
May 08 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
jQuery实现大图轮播
Feb 13 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
vuex 中插件的编写案例解析
Jun 10 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP脚本数据库功能详解(中)
2006/10/09 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
2014年党务公开实施方案
2014/02/27 职场文书
小学生寒假家长评语
2014/04/16 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
大专生求职信
2014/06/29 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
教你使用TensorFlow2识别验证码
2021/06/11 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis