Exemple d'effet de défilement intermittent vers le haut ligne par ligne de texte implémenté par jQuery-js tutoriel-php.cn

Exemple d'effet de défilement intermittent vers le haut ligne par ligne de texte implémenté par jQuery

韦小宝

Libérer： 2018-01-25 11:03:43

original

1690 Les gens l'ont consulté

Cet article présente principalement l'effet de défilement intermittent du texte ligne par ligne vers le haut implémenté par jQuery et implique les compétences opérationnelles liées à la transformation dynamique par jQuery des styles d'éléments de page basés sur les fonctions temporelles. Les amis intéressés par jQuery peuvent s'y référer. article

Le code spécifique est le suivant :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.php.cn 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>

Copier après la connexion

Ce qui précède est le code source de cet article. Les amis qui sont intéressés par cet article peuvent se référer au code source. sera utile à votre étude! Bienvenue à prêter attention au site Web chinois PHP !

Recommandations associées :

l'arrondi de jquery vers le haut et vers le bas convient aux requêtes de pagination

jQuery traverse les parents du DOM tree up ( ), parent(), close()

Explication détaillée de l'utilisation du parcours ascendant jquery, du parcours descendant, du parcours frère et du filtrage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!