<!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. [已解决]报错run `npm audit fix` to fix them, or `npm audit` for details

    问题: added 246 packages from 681 contributors and audited 382 packages in 17.509s found 13 vulnerabil ...

  2. jetson更换源

    参考链接:https://blog.csdn.net/qq_36396941/article/details/88903094 Nano的镜像默认是国外的源,速度很慢,国内的源有的上不去,有的包无法安 ...

  3. web 服务中上传文件大小控制

    参考文章:https://rensanning.iteye.com/blog/2388353 项目场景: Vue + Nginx + Java + Tomcat Nginx作为反向代理服务器,访问To ...

  4. 利用VUE-CLI脚手架搭建VUE项目

    前言 在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习. 具体内容 搭建vue项目的准备工作 1.安装Nodejs.NPM以及VSCod ...

  5. 修改Tomcat的端口号方法

      (1).查找conf路径下的server.xml文件,路径如: I: \tomcat6\apache-tomcat-6.0.32\conf\server.xml (2).打开server.xml文 ...

  6. 微信小程序学习之navigate（1）navigateTo方法与navigateBack方法对于page生命周期不同的触发影响

    小程序的每个页面都有一些生命周期,每个生命周期由分别有着不同的生命周期钩子函数.而我们的业务逻辑写在这些生命周期的钩子函数中,那么弄清楚那种情形下会触发那些生命周期钩子函数就非常重要了 先上一段代码 ...

  7. 移动Windows开始按钮到任务栏中的任何位置

    uses CommCtrl; procedure TForm1.Button1Click(Sender: TObject); var vHandle: THandle; vCount: Integer ...

  8. CentOS下安装Lua

    Lua是一种轻量小巧的脚本语言,用标准  C语言编写并以源代码形式开放,其设计目的是 为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能.官网: http://www.lua.org/ 安装过 ...

  9. ASP.NET MVC Controller激活系统详解2

    一.引言 此篇博文紧接上篇博文进行阐述,本篇博文阐述的主题是Controller激活和url路由 二.总述 ASP.NET路由系统是HTTP请求抵达服务端的第一道屏障,它根据注册的路由规则对拦截的请求 ...

  10. Jsoup 学习笔记

    这里写自定义目录标题 Jsoup 学习笔记 解析 HTML 的字符串解析 URL 解析 本地文件解析 解析数据 DOM 解析 使用选择器解析 选择器概述 选择器组合用法 过滤用法 修改数据 HTML ...