<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>www.jb51.net jQuery文字逐行向上滚动代码</title>

<link href="css/index.css" rel="external nofollow" rel="stylesheet" type="text/css">

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<style>

*{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(,,,); }

li{ list-style:none }

img{ border:none}

a{text-decoration:none;}

/* -------------------------摇奖排行榜----------------------------------- */

.Top_Record{}

.record_Top{width:%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#;}

.topRec_List dl,.maquee{ width:%; overflow:hidden; margin: auto; color:#7C7C7C}

.topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}

.topRec_List dl dd:nth-child(){ width:%; height:40px; line-height:40px; }

.topRec_List dl dd:nth-child(){ width:%; height:40px; line-height:40px; }

.topRec_List dl dd:nth-child(){ width:%; height:40px; line-height:40px; }

.topRec_List dl dd:nth-child(){ width:%; height:40px; line-height:40px; }

.maquee{ height:195px;}

.topRec_List ul{ width:%; height:195px;}

.topRec_List li{ width:%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}

/*.topRec_List li:nth-child(2n){ background:#077cd0}*/

.topRec_List li div{ float:left;}

.topRec_List li div:nth-child(){ width:%;}

.topRec_List li div:nth-child(){ width:%;}

.topRec_List li div:nth-child(){ width:%;}

.topRec_List li div:nth-child(){ width:%;}

.apple a{display:block; text-decoration:none;}

.apple,.aa{ width:%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;}

.apple a,.aa a{ width:%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;}

.aa {word-wrap:break-word;line-height:50px; color:#1B96EE;}

</style>

</head>

<body>

<div class="Top_Record">

  <div class="record_Top">摇奖排行榜</div>

  <div class="topRec_List">

    <dl>

      <dd>编号</dd>

      <dd>姓名</dd>

      <dd>奖项</dd>

      <dd>时间</dd>

    </dl>

    <div class="maquee">

      <ul>

        <li>

          <div></div>

          <div>王**</div>

          <div>中了30元</div>

          <div>// :</div>

        </li>

        <li>

          <div></div>

          <div>王**</div>

          <div>中了30元</div>

          <div>// :</div>

        </li>

        <li>

          <div></div>

          <div>王**</div>

          <div>中了30元</div>

          <div>// :</div>

        </li>

        <li>

          <div></div>

          <div>王**</div>

          <div>中了30元</div>

          <div>// :</div>

        </li>

        <li>

          <div></div>

          <div>王**</div>

          <div>中了30元</div>

          <div>// :</div>

        </li>

        <li>

          <div></div>

          <div>王**</div>

          <div>中了30元</div>

          <div>// :</div>

        </li>

        <li>

          <div></div>

          <div>王**</div>

          <div>中了30元</div>

          <div>// :</div>

        </li>

        <li>

          <div></div>

          <div>王**</div>

          <div>中了30元</div>

          <div>// :</div>

        </li>

      </ul>

    </div>

  </div>

</div>

<script type="text/javascript">

  function autoScroll(obj){

    $(obj).find("ul").animate({

      marginTop : "-39px"

    },,function(){

      $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);

    })

  }

  $(function(){

    var scroll=setInterval('autoScroll(".maquee")',);

     $(".maquee").hover(function(){

      console.log("aaa");

      clearInterval(scroll);

     },function(){

      scroll=setInterval('autoScroll(".maquee")',);

     });

  });

</script>

</body>

</html>
<MARQUEE id="msky" direction="left" width="" scrolldelay ="" onmouseover="this.stop();" onmouseout="this.start();">  <span class="style2"> 今天 晴转多云 ℃～℃ 东南风3-4级</span></MARQUEE>

jQuery实现的文字逐行向上间歇滚动效果示例的更多相关文章

  1. Jquery 文字上下滚动效果示例代码

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

  2. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  3. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  4. 使用JavaScript完成文字向上间歇滚动

    使用JavaScript完成文字的间歇滚动 const init = (initData) => { const area = initData.area; // 设置单行滚动的高度: cons ...

  5. 使用jQuery实现向上循环滚动效果（超简单）

    今天突发奇想 想到的一个新思路 通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的 HTML代码如下 <body> <ul style=" ...

  6. Expression Blend4经验分享：文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  7. jquery插件之文字无缝向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  8. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

  9. 使用jquery animate实现锚点慢慢平滑滚动效果

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

随机推荐

  1. Pandas分类数据和顺序数据转换为标志变量

    #导入pandas库 import pandas as pd #OneHotEncoder用来将数值型类别变量转换为0-1的标志性变量 #LabelEncoder用来将字符串型变量转换为数值型变量 f ...

  2. How to enter special characters like “&” in oracle database? [duplicate]

    SQL> set define off; or use Try 'Java_22 '||'&'||' Oracle_14'

  3. Peasy.NET学习之并发问题处理

    Peasy.net之并发处理 BusinessServiceBase是ServiceBase的自定义实现,提供了额外的独特功能 首先,创建一个业务服务,该业务服务必须继承BusinessService ...

  4. Linux下Qt调用共享库文件.so

    修改已有的pro文件,添加如下几句: INCLUDEPATH += /home/ubuntu/camera/camera/LIBS += -L/home/ubuntu/camera/camera -l ...

  5. easyui datagrid 绑定json对象属性的属性

    今天用easyui 的datagrid绑定数据时,后台提供的数据是实体类类型的,其中有一个实体类A的属性b是另一个实体类B类型的,而前台需要显示b的属性c,这下就悲剧了,前台没法直接绑定了,后来脑筋一 ...

  6. 24. Java SE 、 Java EE 、JavaME 、 JavaWeb 直接的区别和联系

    这个是在别人博客抄的,并不是本人撰写 Java是一门编程语言.Java分为三大版本,SE即标准版,包含了Java核心类库,主要用来开发桌面应用:EE即企业版,包含SE,又有扩展部分(Servlet,J ...

  7. python中模块和包的概念

    1.模块 一个.py文件就是一个模块.这个文件的名字是:模块名.py.由此可见在python中,文件名和模块名的差别只是有没有后缀.有后缀是文件名,没有后缀是模块名. 每个文件(每个模块)都是一个独立 ...

  8. Delphi 字符串函数 StrUtils（大全）

    引用单元: StrUtils; 首部 function AnsiResemblesText(const AText, AOther: string): Boolean; $[StrUtils.pas ...

  9. Redis缓存数据库常见操作

    Jedis的最为常见的操作.主要包括常用的列表(list).集合(set).有序集合(sorted set).哈希表(hash)等数据结构,以及其他特性支持. 参考资料:http://hello-ni ...

  10. BZOJ 4031: [HEOI2015]小Z的房间(Matrix Tree)

    传送门 解题思路 矩阵树定理模板题.矩阵树定理是求图中最小生成树个数,做法是首先求出基尔霍夫矩阵,就是度数矩阵\(-\)邻接矩阵.然后再求出这个矩阵的行列式,行列式的求法就是任意去掉一行一列,然后高斯 ...