jQuery实现的文字逐行向上间歇滚动效果示例


Posted in jQuery onSeptember 06, 2017

本文实例讲述了jQuery实现的文字逐行向上间歇滚动效果。分享给大家供大家参考,具体如下:

运行效果图如下:

jQuery实现的文字逐行向上间歇滚动效果示例

具体代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com 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(0,0,0,0); }
li{ list-style:none }
img{ border:none}
a{text-decoration:none;}
/* -------------------------摇奖排行榜----------------------------------- */
.Top_Record{}
.record_Top{width:90%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#000;}
.topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}
.topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}
.topRec_List dl dd:nth-child(1){ width:17%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(2){ width:18%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(3){ width:25%; height:40px; line-height:40px; }
.topRec_List dl dd:nth-child(4){ width:40%; height:40px; line-height:40px; }
.maquee{ height:195px;}
.topRec_List ul{ width:100%; height:195px;}
.topRec_List li{ width:100%; 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(1){ width:17%;}
.topRec_List li div:nth-child(2){ width:18%;}
.topRec_List li div:nth-child(3){ width:25%;}
.topRec_List li div:nth-child(4){ width:40%;}
.apple a{display:block; text-decoration:none;}
.apple,.aa{ width:90%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;}
.apple a,.aa a{ width:100%; 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>1</div>
          <div>王**</div>
          <div>中了30元</div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>2</div>
          <div>王**</div>
          <div>中了30元</div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>3</div>
          <div>王**</div>
          <div>中了30元</div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>4</div>
          <div>王**</div>
          <div>中了30元</div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>5</div>
          <div>王**</div>
          <div>中了30元</div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>6</div>
          <div>王**</div>
          <div>中了30元</div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>7</div>
          <div>王**</div>
          <div>中了30元</div>
          <div>2014/12/30 14:20</div>
        </li>
        <li>
          <div>8</div>
          <div>王**</div>
          <div>中了30元</div>
          <div>2014/12/30 14:20</div>
        </li>
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript">
  function autoScroll(obj){
    $(obj).find("ul").animate({
      marginTop : "-39px"
    },1000,function(){
      $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
    })
  }
  $(function(){
    var scroll=setInterval('autoScroll(".maquee")',1500);
     $(".maquee").hover(function(){
      console.log("aaa");
      clearInterval(scroll);
     },function(){
      scroll=setInterval('autoScroll(".maquee")',1500);
     });
  });
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 #jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 #jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
jquery+css实现下拉列表功能
Sep 03 #jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
You might like
PHP无限分类的类
2007/01/02 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
php实现购物车功能(下)
2016/01/05 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
Javascript的闭包
2009/12/31 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
Python使用minidom读写xml的方法
2015/06/03 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
公证书样本
2014/04/10 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
工会文体活动总结
2015/05/07 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript