<!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制作毛玻璃效果

    //添加一个图片 UIImageView *imageview = [[UIImageView alloc]init]; imageview.frame = CGRectMake(10, 100, 3 ...

  2. Android应用运行过程（转）

    源:Android应用运行过程 首先,ActivityThread从main()函数开始执行,调用prepareMainLooper()为UI线程创建一个消息队列(MessageQueue). 然后创 ...

  3. git 常用命令--Linus Torvalds

    1.git log 显示仓库的历史记录,默认显示所有记录, 1)git log -m,显示最近的几次提交,, 2)git log --pretty=oneline  显示提交hash和注释 -p 按补 ...

  4. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  5. leetcode day4

    [171]Excel Sheet Column Number Given a column title as appear in an Excel sheet, return its correspo ...

  6. 兼容IE6及以上的导航栏子菜单栏滑过显示隐藏效果

    ;(function(window){        var li = document.getElementById('parentnav').getElementsByTagName('li')[ ...

  7. Zepto.js入门介绍

    GitHub Zepto Zepto的一些可选功能是专门针对移动端浏览器的:因为它的最初目标在移动端提供一个精简的类似jquery的js库. Zepto不支持旧版本的Internet Explorer ...

  8. 在发板实现24位jpg和bmp图片用手划动显示上一张与下一张图片

    arm-linux-gcc test.c -ljpeg -I /usr/local/libjpeg-8a/include/ -L /usr/local/libjpeg-8a/lib/ 这样编译 代码 ...

  9. 关于老版本ubuntu源不能用的问题

    在解决方向键为大写ABCD时安装vim 我的是Ubuntu 10.10 老版本 输入 sudo apt-get install vim 时出现 Package 'vim' has no install ...

  10. php中二维数组如何使用

    最近需要使用PHP中的二维数组,就用一个简单的例子来说明PHP中二数组是如何使用 <?php $a=array('a','b','c'); $c=array('a1','b1','c1'); $ ...