主页 / 网络编程 /

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

网络编程 2021-07-04 17:32www.168986.cn编程入门
这篇文章主要介绍了jQuery实现的文字逐行向上间歇滚动效果,涉及jQuery基于时间函数的页面元素样式动态变换相关操作技巧,需要的朋友可以参考下

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

运行效果图如下

具体代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.jb51. jQuery文字逐行向上滚动代码</title>
<link href="css/index.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script src="http://libs.baidu./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;}
.Rec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}
.Rec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}
.Rec_List dl dd:nth-child(1){ width:17%; height:40px; line-height:40px; }
.Rec_List dl dd:nth-child(2){ width:18%; height:40px; line-height:40px; }
.Rec_List dl dd:nth-child(3){ width:25%; height:40px; line-height:40px; }
.Rec_List dl dd:nth-child(4){ width:40%; height:40px; line-height:40px; }
.maquee{ height:195px;}
.Rec_List ul{ width:100%; height:195px;}
.Rec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px; border-bottom: 1px dashed #aaa;}
/.Rec_List li:nth-child(2n){ background:#077cd0}/
.Rec_List li div{ float:left;}
.Rec_List li div:nth-child(1){ width:17%;}
.Rec_List li div:nth-child(2){ width:18%;}
.Rec_List li div:nth-child(3){ width:25%;}
.Rec_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="Rec_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程序设计有所帮助。

上一篇：JavaScrip数组删除特定元素的几种方法总结 下一篇：JavaScript学习笔记之函数记忆

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by