<!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. oracle 11g odbc连接串及配置

    首先先安装HA-Instant Client-v11.2.0.3.0-x86.rar 下载地址: ftp://hhdown:2-2@58.23.131.52/download/HA-Instant%2 ...

  2. IP头，TCP头，UDP头，MAC帧头定义（转）

    源:IP头,TCP头,UDP头,MAC帧头定义 一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/ typedef struct _MAC_FRAME_HEADER { ]; //目的m ...

  3. vuejs 父组件向子组件传递($broadcast()的用法)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 关于java sort的几种实现方式（单纯排序，按照bean的某一个字段，按照bean的多个字段）

    最近的开发过程中遇到了,按照bean类中的多个字段进行排序的情况,借此机会把相关的排序做法,简单整理备份一下. 1.list的单纯排序 2.list元素为bean的情况,按照bean的某一个属性进行排 ...

  5. iOS 界面布局，设置约束

    1. 设置控件的宽度是父视图的宽度的1/2 在控件上按住ctrl,按住鼠标左键,拖动到父视图,这时出来一个选项,选中aspect 在Multiplier中填上1:2 即可,其它的比例也是这样 2. 设 ...

  6. WGCNA算法研究笔记

    转自:http://www.gogoqq.com/ASPX/8390905/JournalContent/1303140588.aspx 研究了近半年的算法,记录下来给自己一个交代,也应该是考G前地最 ...

  7. 一个a::before的写法

    #key_table table tr td a::before{//这是个a前面的蓝色小圆点    background: #48A7D9;    content: "";//这 ...

  8. 史上最全的css hack（ie6-9,firefox,chrome,opera,safari）

    <!DOCTYPE html> <html> <head> <title>Css Hack</title> <style> #t ...

  9. 笔记整理——C语言-http

    C语言 HTTP GZIP数据解压 - 大烧饼的实验室 - 博客园 - Google Chrome (2013/4/10 18:22:26) C语言 HTTP GZIP数据解压   这个代码在http ...

  10. violin 结构介绍

    参考:http://www.iqiyi.com/w_19rt9yvv9p.html 主要结构有:琴身.指板.腮托.琴马.琴弦.琴轴