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编写textarea输入字数限制代码
Mar 23 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery实现图片轮播器
May 23 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 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+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
JS+DIV实现拖动效果
2020/02/11 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python统计中文字符数量的两种方法
2019/01/31 Python
Python List cmp()知识点总结
2019/02/18 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python Tornado框架的使用示例
2020/10/19 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
旗帜观后感
2015/06/08 职场文书
招商银行收入证明
2015/06/17 职场文书
首次购房证明
2015/06/19 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书