<!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. Linux操作基础

    摘要 一.Linux操作系统概述 二.Linux操作系统安装 三.Linux文件系统及文件基础 四.Linux操作系统命令使用基础 五.Linux应用程序的安装与卸载基础 五.用户及进程 六.相关信息 ...

  2. JAVA里面的int类型 和Integer类型，有什么不一样

    JAVA里面的int类型 和Integer类型,有什么不一样 原创 2013年09月04日 23:15:11 标签: java / 2120 编辑 删除 JAVA里面的int类型 和Integer类型 ...

  3. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

  4. Tools: java安装指南

    参考: https://www.cnblogs.com/smyhvae/p/3788534.htmljava安装 (1)新建->变量名"JAVA_HOME",变量值" ...

  5. Yii2 : Active Record add Not In condition

    $query = MyModel::find()->where(['not in','attribute',$array]); 參考 Yii2 : Active Record add Not I ...

  6. 初始化css样式

    html,body,div,ul,li,ol,a,input,textarea,p,dl,dt,dd{margin:0;padding:0;} ul li{list-style: none;} a{t ...

  7. 视频质量评测标准——VMAF

    阿里云视频云直播转码每天都会处理大量的不同场景.不同编码格式的直播流.为了保证高画质,团队借助VMAF标准来对每路转码的效果做质量评估,然后进行反馈.调优.迭代.这么做的原因在于,像动作片.纪录片.动 ...

  8. HDU6331Problem M. Walking Plan

    传送门 分块floyd $f[i][j][k]$表示从i走k步到j的最短路 $g[i][j][k]$表示从i走k*100步到j的最短路 $h[i][j][k]$表示从i至少走k步到j的最短路 询问从x ...

  9. NX二次开发-获取矩阵值UF_CSYS_ask_matrix_values

    NX9+VS2012 #include <uf.h> #include <uf_csys.h> UF_initialize(); //获取WCS标识 tag_t WcsId = ...

  10. flutter WebView flutter js 互调

    通过webview 进行flutter 和js 的互调,页面可以放在其他网站 也可以放在本地,我这里放在本地进行测试. 1.引入webview_flutter: ^0.3.5+2 这个是官网推荐用的, ...