jQuery实现简单的间隔向上滚动效果

本文实例讲述了jQuery实现简单的间隔向上滚动效果的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<div id="broadcast" class="bar" name="giftactive">
 <div style="float:left"><strong>间隔滚动效果：</strong></div>
 <div id="demo" style="overflow:hidden;height:22px;line-height:22px;">
     <ul class="mingdan" id="holder">
  <li><a href="#" target="_blank">aaaaaa</a></li>
  <li><a href="#" target="_blank">bbbbbb</a></li>
  <li><a href="#" target="_blank">cccccc</a></li>
  <li><a href="#" target="_blank">dddddd</a></li>
  <li><a href="#" target="_blank">eeeeee</a></li>
     </ul>
 </div>
</div>
<script type="text/javascript">
function AutoScroll(obj) {
 $(obj).find("ul:first").animate({
 marginTop: "-22px"
 }, 500, function() {
 $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
 });
 }
 $(document).ready(function() {
 setInterval('AutoScroll("#demo")', 1000)
 });
</script>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 一个JQuery写的点击上下滚动的小例子

    功能需求: 1.滚动框内显示10条记录: 2.有向上和向下滚动按钮,每次点击按钮向上或向下滚动记录条数,不自动滚动: 3.记录条数不循环滚动,滚动到起点或终点则停止滚动. 下面介绍一个简单实现方法: 1.外层容器(div) overflow: hidden,内层列表(ul) 2.按钮点击事件触发一个修改列表的函数 3.应用animate实现动画效果 具体不再啰嗦,直接上代码 CSS设置 复制代码 代码如下: <style type="text/css"> ul, li {

  • 新闻上下滚动jquery 超简洁(必看篇)

    实例如下: <div class = "box"> <dl class="textlist"> <dd>11你好,欢迎来到我们</dd> <dd>22你好,欢迎来到我们</dd> <dd>33你好,欢迎来到我们</dd> <dd>44你好,欢迎来到我们</dd> <dd>55你好,欢迎来到我们</dd> </dl>

  • jQuery简单实现上下,左右滑动的方法

    本文实例讲述了jQuery简单实现上下,左右滑动的方法.分享给大家供大家参考,具体如下: 渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白 我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了. 闲话不多说,上码 //isw2 zhouxianglh 2010.07.07 //移动ul var slideOperate = { slideUlId : "",//UL id 用于操作Ul fadeInTime : 2000

  • jQuery实现简单的间隔向上滚动效果

    本文实例讲述了jQuery实现简单的间隔向上滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <div id="broadcast" class="bar" name="giftactive">  <

  • jQuery插件实现文字无缝向上滚动效果代码

    本文实例讲述了jQuery插件实现文字无缝向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • jQuery实现单行文字间歇向上滚动源代码

    使用jQuery实现单行文字间歇向上滚动 效果网址:http://www.keleyi.com/keleyi/phtml/textscroll.htm 本效果加强版:http://www.keleyi.com/a/bjac/532bedbffca1affa.htm 主要增加了光标悬停效果 以下是源代码: 复制代码 代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/j

  • jquery插件之文字间歇自动向上滚动效果代码

    本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • 原生JS实现列表内容自动向上滚动效果

    原生JS实现列表内容自动向上滚动效果

    效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul.如下图:    (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden:) 2. 样式方面:由于要滚动,所以必须2个ul的高度 > 外层可视div高度,且div必须设置overflow:hidden; 代码实现 HTML: <div id="revie

  • jQuery实现简单的网页换肤效果示例

    jQuery实现简单的网页换肤效果示例

    本文实例讲述了jQuery实现简单的网页换肤效果.分享给大家供大家参考,具体如下: 这里有4个文件:skin.html.blue.css.green.html.red.html,都放在同一目录下. 1.skin.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • jquery实现网页的页面平滑滚动效果代码

    jquery实现网页的页面平滑滚动效果代码

    本文实例讲述了jquery实现网页的页面平滑滚动效果代码.分享给大家供大家参考,具体如下: 这款网页页面平滑滚动jquery代码,点击链接会让网页平滑滚动到链接对应的位置. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-link-scroll-page-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • JQuery实现简单的服务器轮询效果实例

    本文实例讲述了JQuery实现简单的服务器轮询效果.分享给大家供大家参考,具体如下: 很多论坛都有进入后,弹出提示,说有多少封邮件没有看,或者是一个oa系统,进入后,提示有多少个任务没有做.每隔一段时间会提示一次,但是如何实现呢.其实,利用jquery的话,会比较简单,核心元素就是json格式解析和setInterval()函数.下面一起来实现: 首先,我们default.aspx的页面如下所示: <%@ Page Language="C#" AutoEventWireup=&q

  • jQuery控制div实现随滚动条滚动效果

    本文实例讲述了jQuery控制div实现随滚动条滚动效果的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条滚动效果</title> <script src="../js/jquery-1.11.1.min.js" type="text/javascript"&

  • jquery实现简单的banner轮播效果【实例】

    jquery实现简单的banner轮播效果【实例】

    朋友给我看了一个轮播效果,把js下载一看,丫丫的一个这么简单的效果,这么的就能写个几百行的,严重影响浏览器加载速度嘛,以为人家宽带流量不要钱玩的哦..无奈之下给他写了个简单的,把所有代码放上去都没有超过70行,还有圆角的那个CSS,不是每个浏览器都是圆角的,不过不影响美观,嘻嘻. <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <scri

随机推荐