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.load()和Jsp的include的区别
Apr 12 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 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文件缓存类实现代码
2015/10/26 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
常用DOM整理
2015/06/16 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
Python入门篇之文件
2014/10/20 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
python学生管理系统代码实现
2020/04/05 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Numpy之reshape()使用详解
2019/12/26 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
大学生职业规划前言模板
2013/12/27 职场文书
销售经理工作职责
2014/02/03 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
护理实习生带教计划
2015/01/16 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS