<!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. matlab unique 顺序不变

    对于一个向量,使用unique去重后会自动排序,为了保持原顺序: A = [5,1,8,5,2,8,3,9,6,1];[i,j] = unique(A,'first');B = A(sort(j)); ...

  2. 关于IP网段间互访的问题—路由是根本（转）

    源: 关于IP网段间互访的问题—路由是根本

  3. 【转】HashMap实现原理分析

    1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1 ...

  4. jQuery-ui datepicker的使用演示代码

    这两天使用jquery做一个web端展示的工具,遇到了不少问题也学到了不少知识.其中有一个就是在页面中显示日期选择器的功能,通过百度直接使用的是jquery datepicker 看到一篇使用说明很不 ...

  5. 微信小程序登录

    一. 小程序不支持cookie会话 1. 通过传递与检验3rd_session来保持会话 2. 3rd_session可以执行'`head -n 80 /dev/urandom | tr -dc A- ...

  6. 开启分布式事物DTC

    1.web服务器开启分布式事物配置后,数据库服务器的host文件要设置  “IP  web服务器主机名” 的映射,否则会 出现 “与基础事务管理器的通信失败” #跨网段使用TransactionSco ...

  7. Binary转换成Hex字符串

    想调优别人的代码,网上搜索一下Binary to Hexstring的转换,全是利用printf.scanf之类实现的,效率好低,还是自己想个简单的办法吧! .......此处省略一万字....... ...

  8. thinkphp 3.2 导入第三方类库的两种方式

    第一种

  9. --@angularJS--路由、模块、依赖注入

    以下是演示angular路由切换的demo. 主页:index.html <!doctype html><html ng-app="bookStoreApp"&g ...

  10. eclipse开发velocity实例（初学）

    开发环境         Eclipse Java EE IDE for Web Developers.(Version: Helios Service Release 1) jdk1.6.0_07 ...