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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery插件实现图片轮播效果
Oct 19 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图片加中文水印实现代码分享
2012/10/31 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
javascript中window.event事件用法详解
2012/12/11 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Python 通过URL打开图片实例详解
2017/06/01 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
opencv+python实现均值滤波
2020/02/19 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python 如何批量更新已安装的库
2020/05/26 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
音乐教育感言
2014/03/05 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
小学家长意见怎么写
2015/06/03 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
手残删除python之后的补救方法
2021/06/26 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫