实例讲解jQuery实现的文字逐行向上间歇滚动效果-js教程-PHP中文网

首页

web前端

js教程

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

小云云

Dec 29, 2017 am 10:34 AM

jquery实现特点

本文主要介绍了jQuery实现的文字逐行向上间歇滚动效果,涉及jQuery基于时间函数的页面元素样式动态变换相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

运行效果图如下：

具体代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net 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:&#39;微软雅黑&#39;; -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 p{ float:left;}
.topRec_List li p:nth-child(1){ width:17%;}
.topRec_List li p:nth-child(2){ width:18%;}
.topRec_List li p:nth-child(3){ width:25%;}
.topRec_List li p: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>
<p class="Top_Record">
  <p class="record_Top">摇奖排行榜</p>
  <p class="topRec_List">
    <dl>
      <dd>编号</dd>
      <dd>姓名</dd>
      <dd>奖项</dd>
      <dd>时间</dd>
    </dl>
    <p class="maquee">
      <ul>
        <li>
          <p>1</p>
          <p>王**</p>
          <p>中了30元</p>
          <p>2014/12/30 14:20</p>
        </li>
        <li>
          <p>2</p>
          <p>王**</p>
          <p>中了30元</p>
          <p>2014/12/30 14:20</p>
        </li>
        <li>
          <p>3</p>
          <p>王**</p>
          <p>中了30元</p>
          <p>2014/12/30 14:20</p>
        </li>
        <li>
          <p>4</p>
          <p>王**</p>
          <p>中了30元</p>
          <p>2014/12/30 14:20</p>
        </li>
        <li>
          <p>5</p>
          <p>王**</p>
          <p>中了30元</p>
          <p>2014/12/30 14:20</p>
        </li>
        <li>
          <p>6</p>
          <p>王**</p>
          <p>中了30元</p>
          <p>2014/12/30 14:20</p>
        </li>
        <li>
          <p>7</p>
          <p>王**</p>
          <p>中了30元</p>
          <p>2014/12/30 14:20</p>
        </li>
        <li>
          <p>8</p>
          <p>王**</p>
          <p>中了30元</p>
          <p>2014/12/30 14:20</p>
        </li>
      </ul>
    </p>
  </p>
</p>
<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(&#39;autoScroll(".maquee")&#39;,1500);
     $(".maquee").hover(function(){
      console.log("aaa");
      clearInterval(scroll);
     },function(){
      scroll=setInterval(&#39;autoScroll(".maquee")&#39;,1500);
     });
  });
</script>
</body>
</html>

相关推荐：

javascript 单行文字向上跑马灯滚动显示_广告代码

基于jquery实现的文字向上跑动类似跑马灯的效果_jquery

jquery单行文字向上滚动效果的实现代码_javascript技巧

以上是实例讲解jQuery实现的文字逐行向上间歇滚动效果的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。