<!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. Nginx学习——proxy_pass

    参考官网:http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pass 定义:用来设置被代理服务器的协议(http或https ...

  2. python实现马赛克拼图！

    python实现马赛克拼图 直接上代码! 代码如下: #!/usr/local/bin/python3#  --*-- coding:utf8 --*-- import getoptimport sy ...

  3. mysql（自动添加系统时间）timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性

    timestamp有两个属性,分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种,使用情况分别如下: 1.CURRENT_TIMESTAMP 当要向 ...

  4. 自动化监控系统(三) 搭建xadmin做网站后台

    Django有个自带的admin后台,不过界面不怎么好看,这里我用xadmin 我的python版本是3.5,可以使用支持py3的xadmin:https://github.com/sshwsfc/x ...

  5. Windows平台将远程服务器的目录挂载为本地磁盘

    我们在设置数据库自动备份时,为了数据的安全往往需要直接将数据备份到远程服务器上.在Linux可以通过NFS挂载来实现,在Windows平台可以直接通过net use+subst来实现将远程服务器的目录 ...

  6. 【洛谷】P1247取火柴游戏

    题目链接:https://www.luogu.org/problemnew/show/P1247 题意:nim取石子的题意,多了一个判断先手赢的话,输出先手第一把怎么拿,以及拿完之后每堆还剩多少. 题 ...

  7. VisualStuido中将C#脚本封装打包DLL并调用

    DLL (Dynamic Link Library)---动态链接库 首先了解下使用DLL的优势,程序运行时不用加载所有代码,只有运行到引用时,才从DLL库中取出.并且使用DLL文件还可以减小程序体积 ...

  8. Elasticsearch索引别名使用

    背景 项目中使用的老的索引,由于数据冗余,会想影响性能.因此需要重新建立索引,但是这样必然需要更新服务中的索引名称,然后重新启动服务,可能会对服务的使用者产生一定的影响.因此,调研了Elasticse ...

  9. js 万能判断

    console.log(Object.prototype.toString.call(123)) //[object Number] console.log(Object.prototype.toSt ...

  10. 程序‘vim’已包含在下列软件包中

    解决方法: 输入:sudo apt-get install ctags 输入:sudo apt-get install vim 输入:sudo ./config.sh (亲测有效)输入:vim tes ...