一个非常好用的文字滚动的案例,鼠标悬浮可暂停
2016-11-17 12:43
190 查看
网上找了很多,万变不离其宗,写法核心都是一样的,在这里我给大家总结一下,可收藏备用。
html:
解析:适用于只有一行显示的公告类,以及展示中奖名单/抽奖结果等大框类,改变list高度即可
方案一:
方案二:
解析:两种方案实现的功能是一样的,都是通过改变margin-top的值,把第一个再添加到最后一个来实现的。第一种直接写出运行步骤,定时器可以定义在加载函数的外面,也可写在里面,但是以下的内容必须写在加载函数的里面,否则不能正常执行。
如果整体又定义为一个函数,则下面要在加载函数里调用一次函数,即可执行。
在hover事件中的回调函数,必须写timer=setInterval(),指定时器重新赋值给timer,直接写setInterval不起作用,如果写var timer=setInterval();则又重新定义了一个timer,同样不起作用。
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,同样不起作用。
相关文章推荐
- 一个非常好用的文字滚动的案例,鼠标悬浮可暂停
- 一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
- 一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
- 鼠标放到链接上出现一个说明框,里面有滚动的文字说明
- 文字滚动应用,禁止鼠标控制暂停或滚动
- 自定义一个jquery插件[鼠标悬浮时候,出现说明label]
- 鼠标悬浮到表格的单元格上,将弹出一个框,框中显示这个单元格的内容。框失去焦点,框也消失。利用jQuery+javascript写的。
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- JS实现“鼠标控制局部文字滚动效果”研究
- 重写ext的TextField控件,增加鼠标悬浮提示和控件后加说明文字
- 图片等比例缩放 无缝滚动 下拉菜单 ——一个非常好用的jq库,
- 兼容FF,JS不间断循环滚动,包含自滚动,左右自滚动,点击左右滚动,鼠标暂停效果
- jcarousellite插件鼠标经过和鼠标移出悬浮效果及图片小于可见数是滚动混乱
- 现在还在用VB6编程的朋友可以来看一下,我写的一个小程序,在VB6开发环境下支持鼠标滚动轮的操作
- JavaScript:一个鼠标动态跟随文字特效的示例
- 一个js实现任务栏文字滚动效果
- 图片等比例缩放 无缝滚动 下拉菜单 ——一个非常好用的jq库,
- 自定义一个jquery插件[鼠标悬浮时候 出现说明label]
- 如何让一个方框栏内的文字滚动显示?
- 一朵美丽的花&鼠标滚动文字