<!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
   
  <title>jQuery文字逐行向上滚动代码 - 站长素材</title>
  <link href="css/index.css" rel="stylesheet" type="text/css">
  <script src="js/jquery.min.js"></script>
  </head>
   
  <body>
   
  <!-- -------------摇奖排行榜--------------- -->
  <div class="Top_Record">
  <div class="record_Top"><p>摇奖排行榜</p></div>
  <div class="topRec_List">
  <dl>
  <dd>编号</dd>
  <dd>姓名</dd>
  <dd>奖项</dd>
  <dd>时间</dd>
  </dl>
  <div class="maquee">
  <ul>
  <li>
  <div>1</div>
  <div>王**</div>
  <div>中了30元</div>
  <div>2014/12/30 14:20</div>
  </li>
  <li>
  <div>2</div>
  <div>王**</div>
  <div>中了30元</div>
  <div>2014/12/30 14:20</div>
  </li>
  <li>
  <div>3</div>
  <div>王**</div>
  <div>中了30元</div>
  <div>2014/12/30 14:20</div>
  </li>
  <li>
  <div>4</div>
  <div>王**</div>
  <div>中了30元</div>
  <div>2014/12/30 14:20</div>
  </li>
  <li>
  <div>5</div>
  <div>王**</div>
  <div>中了30元</div>
  <div>2014/12/30 14:20</div>
  </li>
  <li>
  <div>6</div>
  <div>王**</div>
  <div>中了30元</div>
  <div>2014/12/30 14:20</div>
  </li>
  <li>
  <div>7</div>
  <div>王**</div>
  <div>中了30元</div>
  <div>2014/12/30 14:20</div>
  </li>
  <li>
  <div>8</div>
  <div>王**</div>
  <div>中了30元</div>
  <div>2014/12/30 14:20</div>
  </li>
  </ul>
  </div>
  </div>
  </div>
   
   
  <div class="apple">
  <ul>
  <li><a href="#" target="_blank">你是我的小丫小苹果 </a></li>
  <li><a href="#" target="_blank">怎么爱你都不嫌多</a></li>
  <li><a href="#" target="_blank">红红的小脸儿温暖我的心窝 </a></li>
  <li><a href="#" target="_blank">点亮我生命的火 火火火火</a></li>
  <li><a href="#" target="_blank">你是我的小丫小苹果 </a></li>
  <li><a href="#" target="_blank">就像天边最美的云朵</a></li>
  <li><a href="#" target="_blank">春天又来到了花开满山坡 </a></li>
  <li><a href="#" target="_blank">种下希望就会收获</a></li>
  </ul>
  </div>
   
   
  <script type="text/javascript">
  function autoScroll(obj){
  $(obj).find("ul").animate({
  marginTop : "-39px"
  },500,function(){
  $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
  })
  }
  $(function(){
  setInterval('autoScroll(".maquee")',3000);
  setInterval('autoScroll(".apple")',2000);
   
  })
   
  </script>
   
  <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
  <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
  </div>
  </body>
  </html>
   

Jquery 文字上下滚动效果示例代码的更多相关文章

  1. jquery文字纵向滚动效果（带间隔停留）

    <script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...

  2. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  3. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  4. jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery文字左右滚动

    实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...

  6. javascript跟随滚动效果插件代码（javascript Follow Plugin）

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

  7. jQuery实现的文字逐行向上间歇滚动效果示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  9. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

随机推荐

  1. JDBC操作数据时中文乱码

    /** * DB地址 */ private static final String DB_URL="jdbc:mysql://localhost:3306/db_book?useUnicod ...

  2. zeromq随笔

    ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高.是一个消息处理队列库,可在多个线 ...

  3. MYsql数据库ERROR总结

    描述:#Warning: Using a password on the command line interface can be insecure.#ERROR 1045 (28000): Acc ...

  4. Linux之文件权限属性设置

    文件权限属性设置 1.chown命令 chrep命令 chown命令改变某个文件或目录的所有者和所属的组,该命令可以向某个用户授权,使该用户变成指定文件的所有者或者改变文件所属的组. 用户可以是用户或 ...

  5. intel Xeon(R) CPU E5-2650 v2 性能测试报告

                                          intel  Xeon(R) CPU E5-2650 v2                                 ...

  6. UVa 10057 - A mid-summer night's dream

    题目大意:给n个数,找一个数A使得A与这n个数的差的绝对值最小.输出A最小的可能值,n个数中满足A的性质的数的个数以及满足A性质的不同的数的个数(不必从这n个数中挑选). 看见绝对值就想到了数轴上点之 ...

  7. 将MPLS编译进linux内核中

    系统环境:linux kernel 2.6.35.(此环境是上一篇文章中将ubuntu内核替换后的环境) 编译过程如下: 1)首先需要下载patch文件:linux-kernel-v2.6.35-mp ...

  8. C,C++,VC++有什么区别

    C语言是一种古老而又经久不衰的计算机程序设计语言,大约诞生于上个世纪60年代.由于它的设计有很多优点,多年以来深受广大程序设计人员的喜爱,并逐渐淘汰了很多其它程序设计语言.我们平时使用的大多数软件都是 ...

  9. Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle

    这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...

  10. LNMP 快速安装

    网址是:http://lnmp.org/install.html 值得注意的是:它基本上把所有的扩展都装上了,有点冗余 安装完成后,根目录的位置是 /home/wwwroot/default LNMP ...