<!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. ios上 更改 状态栏(UIStatusBar)的颜色，你值得一看、收藏

    IOS上 关于状态栏的相关设置(UIStatusBar) 知识普及 ios上状态栏 就是指的最上面的20像素高的部分 状态栏分前后两部分,要分清这两个概念,后面会用到: 前景部分:就是指的显示电池.时 ...

  2. X-007 FriendlyARM tiny4412 u-boot移植之内存初始化

    <<<<<<<<<<<<<<<<<<<<<<<<< ...

  3. 只要单片机具有真正唯一ID,就可以让加密坚不可摧（转）

    源:只要单片机具有真正唯一ID,就可以让加密坚不可摧 http://www.amobbs.com/thread-5518980-1-1.html 第一环:ID-->F1(ID) -----> ...

  4. BZOJ 3101: N皇后

    3101: N皇后 Time Limit: 10 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 178  Solved: 94[Submit][ ...

  5. u-boot源码下载

    1. 使用git下载u-boot源码  1.1 clone u-boot源码仓库 可以使用git.HTTP.和 rsync协议来下载u-boot源码.你可以使用如下方法来克隆源码树: $ git cl ...

  6. driver_register()函数解析

    driver_register()函数解析 /** * driver_register - register driver with bus * @drv: driver to register *  ...

  7. Zju1290 Word-Search Wonder(http://begin.lydsy.com/JudgeOnline/problem.php?id=2768)

    2768: Zju1290 Word-Search Wonder Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 4  Solved: 2[Submit] ...

  8. dev repositoryItem 手工定义

    一.打开设计界面 二.定义Repository 事件定义 三.把repositoryItemTextEdit1邦定存在的列

  9. CocoaPods ReactiveCocoa 学习实践一 之 配置环境

    1.安装CocoaPods 1.00.参考 CocoaPods 文档 1.01.是否已安装 which pod 1.1.升级gem命令 sudo gem update --system 1.2.切换C ...

  10. Discuz经典函数注释之authcode

    Discuz函数中最经典的函数是authcode函数,因为supesite,UCenterHome,UCenter,Discuz X都使用了这个函数进行加密啊传输串与cookie 今天为大家带来aut ...