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

2024-04-10 08:15:59

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

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 文字滚动效果

这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码代码如下: <div class="box" id="marqueebox0"> <ul> <li st
js 上下文字滚动效果

js实现的文字向上滚动效果,适合文字公告等. test #textHeight{line-height:25px; height:25px; overflow:hidden; width:150px; font-size:12px; border:solid 1px #666;} function ScrollText(content){ this.Delay=10; this.Amount=1; this.Direction="up"; this.Timeout=1000; this
js 动态文字滚动的例子

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>这是一个动态Java
如何让一个方框栏内的文字滚动显示？

如何让一个方框栏内的文字滚动显示? <% dim NewsStr(1,5) NewsStr(0,0)="下载本栏链接" NewsStr(1,0)="http://www.intels.net/" NewsStr(0,1)="中国水利水电出版社" NewsStr(1,1)="http://www.waterpub.com.cn/&quo
Marquee配合DIV实现的文字滚动效果代码

比如本款代码中,它与DIV 的ID配合,实现一个符合W3C标准的文字滚动效果,这里你只需赋给marquee一个id就可以控制文字了,不理解的朋友看代码. 文字成批滚动我们(jb51.net)提供各类编程源码.书籍教程.JavaScript/CSS特效代码以及常用软件下载等,做有质量的学习型源码下载站. [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
js焦点文字滚动效果代码分享

本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突运行效果图:---------------
js文字滚动停顿效果代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
js+div实现文字滚动和图片切换效果代码

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes
js实现文字滚动效果

首先先看一下大致效果图,因为是动态的,在页面无法显示出来. 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;} ul,li{list-style:none;} a{ text-decoration:none; color:#333;} #demo{ overflow:hidden; /*溢出的部分不显示*/ wi
JS实现倒计时和文字滚动的效果实例

本文实例讲述了JS实现倒计时和文字滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果.这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助.这里主要是通过js实现的. 一.倒计时效果的实现前台部分的完整代码如下: 复制代码代码如下: <html xmlns="http://www.w3.o
仿猪八戒网左下角的文字滚动效果

源码: css: 复制代码代码如下: *{padding:0;margin:0;font-size:12px;} .do_ta { border: 1px solid #E4E4E4; margin:10px auto; width:170px; } .do_ta .ta_ta { background: url("http://s.zbjimg.com/p/zbj/css/../img/tafb.gif") no-repeat; height: 52px; width: 168px
Android实现文字滚动效果

Android 实现文字滚动效果,自己写了个timer小计时器,textview文字上下翻动效果: public class AutoTextView extends TextSwitcher implements ViewSwitcher.ViewFactory { private float mHeight; private Context mContext; //mInUp,mOutUp分别构成向下翻页的进出动画 private Rotate3dAnimation mInUp; priva
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

兼容各浏览器的文本行高复制代码代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t

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

相关推荐

随机推荐