一个非常好用的文字滚动的案例，鼠标悬浮可暂停

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

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

转载于:https://www.cnblogs.com/beileixinqing/p/6073328.html

一个非常好用的文字滚动的案例，鼠标悬浮可暂停相关推荐

html滚动字幕鼠标悬停,一个非常好用的文字滚动的案例，鼠标悬浮可暂停[两种方案任选]...
网上找了很多,万变不离其宗,写法核心都是一样的,在这里我给大家总结一下,可收藏备用. html: 公告一或中奖者甲公告二或中奖者乙公告三或中奖者丙解析:适用于只有一行显示的公告 ...
使用CSS3动画实现文字滚动
以前实现文字滚动经常使用marquee标签,现在随着H5的兴起,鉴于该标签糟糕的体验,这个标签已经被W3C标准废弃了,尽管现在浏览器还支持这个标签,但是寻找文字滚动的新方式才是未来的选择.也有很多人会 ...
html 控制文字的标签,html里面有一个控制文字滚动的标签marquee，比较有用。
简介这篇文章主要介绍了html里面有一个控制文字滚动的标签marquee,比较有用.以及相关的经验技巧,文章约3183字,浏览量161,点赞数4,值得参考! 本节笔者讲述HTML代码中比较特殊的标签, ...
html里面有一个控制文字滚动的标签marquee，比较有用。
本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 制作滚动文字通过本章前面的学习,读者已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字 ...
php页头滚动文字公告,jQuery公告栏文字滚动插件
jQue作一新求抖直微圈ry插件关于jQue作一新求抖直微圈ry插件,http://www.cnblogs.com/ajianbeyourself/p/5815689.html 这篇文章写得真心不错 ...
html marquee css,HTML之marquee(文字滚动)详解_html/css_WEB-ITnose
语法: 以下是一个最简单的例子: 代码如下: Hello, World 下面这两个事件经常用到: onMouseOut="this.start()" :用来设置鼠标移出该区域时继续 ...
关于qt 实现laber上面的文字滚动
写代码前.首先我们肯定要新建一个项目. 1.点击文件新建文件或项目 2.选择带界面的.名称自己写.然后继承widget.完成 3.这样,我们就得到了一个空的gui项目了. 新建一个能实现文字滚动的头. ...
Vue2竖向文字滚动
可自定义设置以下属性: 滚动文字数组(sliderData),必传文字滚动时间间隔(interval),默认3000ms 展示文字宽度(width),默认800px,可传100vw 展示文字高度(h ...
Axure怎么制作文字滚动的动态效果
对于那些刚接触Axure RP软件的用户来说,如果想要独自制作一个滚动字幕效果,无疑是有些困难的.鉴于此,本文整理了Axure制作文字滚动的动态效果的方法讲解,有需要的朋友可以参考. Axure怎么制 ...
msclass 文字滚动_【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...

一个非常好用的文字滚动的案例，鼠标悬浮可暂停

一个非常好用的文字滚动的案例，鼠标悬浮可暂停相关推荐

最新文章

热门文章