<!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. 高级UI晋升之常用View（三）上篇

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将先从以下两个内容来介绍常用View: [RecycleView] [Ca ...

  2. Codeforces Round #527 F - Tree with Maximum Cost /// 树形DP

    题目大意: 给定一棵树 每个点都有点权 每条边的长度都为1 树上一点到另一点的距离为最短路经过的边的长度总和 树上一点到另一点的花费为距离乘另一点的点权 选定一点出发 使得其他点到该点的花费总和是最大 ...

  3. nginx 简单使用

    一,下载 http://nginx.org/en/download.html 这个是我下载的windows版本 二,解压后目录 三,修改配置文件 (由于80端口很可能被 SQL Server Repo ...

  4. Delphi流

      一.流的概念 流简单说是建立在面向对象基础上的一种抽象的处理数据的工具,它定义了一些处理数据的基本操作,如读取数据,写入数据等,程序员只需掌握对流进行操作,而不用关心流的另一头数据的真正流向.其实 ...

  5. php上传(一)

    php上传基础知识总结 1.文件上传 1>文件上传的原理:将客户端上的文件通过浏览器上传到服务器上, 在将服务器上的文件移动到指定目录. 2>客户端的配置 表单页面,浏览框 method= ...

  6. ThinkPHP框架数组定义

    PHP数组定义 ThinkPHP框架中所有配置文件的定义格式均采用返回PHP数组的方式,格式为: //项目配置文件 return array( 'DEFAULT_MODULE' => 'Inde ...

  7. Delphi提取EXE,DLL文件图标

    //uses ShellAPIprocedure TForm1.Button1Click(Sender: TObject);var IconIndex:Word; h:hICON;begin Icon ...

  8. 51nod 1627 瞬间移动(组合数学)

    传送门 解题思路 因为每次横纵坐标至少\(+1\),所以可以枚举走的步数,枚举走的步数\(i\)后剩下的就是把\(n-1\)与\(m-1\)划分成\(i\)个有序正整数相加,所以用隔板法,\(ans= ...

  9. USACO 06JAN 牛的舞会 洛谷2863

    题目描述 The N (2 <= N <= 10,000) cows are so excited: it's prom night! They are dressed in their ...

  10. Core Text 入门

    本文所涉及的代码你可以在这里下载到 https://github.com/kejinlu/CTTest,包含两个项目,一个Mac的NSTextView的测试项目,一个iOS的Core Text的测试项 ...