recherche

Maison >interface Web >js tutoriel >Exemple de partage de l'implémentation jQuery de l'effet de défilement de la bannière publicitaire

Exemple de partage de l'implémentation jQuery de l'effet de défilement de la bannière publicitaire

小云云
小云云original
2017-12-30 14:44:341514parcourir

Cet article présente principalement jQuery pour obtenir l'effet de défilement de la barre publicitaire en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{padding: 0px;margin: 0px;}
      #list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
      #list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <script>
      var marginTop = 0;//注意命名
      var scroll = true; 
      //定时函数，每150毫秒执行一次函数
      setInterval(function(){
        if(scroll){ 
          $("#list li:first").animate(  //第一个li开始执行动画
            {marginTop:marginTop--}, //设置上面的外边距自减
            0,
            function(){  //动画之后执行的函数

              if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度
                var $f = $(this); //复制一个li
                $(this).remove(); //把第一个移除。第一个移除之后，第二个就自动变为第一个
                marginTop=0;
                $f.css("margin-top","0px");
                $("ul").append($f); //把第一个追加加到列表的最后，变成一个无缝连接
              }
            }
          );
        }
      },150);
      $(function(){
        $("ul").hover(function(){scroll = false;},function(){scroll = true;});

      });
    </script>
  </head>
  <body>
    <p id="list">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
      </ul>
    </p>
  </body>
</html>

Recommandations associées :

Tutoriel Javascript sur la façon d'obtenir un effet de bande publicitaire circulaire

Implémentation de la bande publicitaire flottante Html+CSS decomposition_HTML/Xhtml_production de pages web

implémentation js du code de la bande publicitaire flottante qui peut être fermé en haut des compétences website_javascript

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partage de technologie de développement de pagination DataTables du plug-in jQueryArticle suivant：Partage de technologie de développement de pagination DataTables du plug-in jQuery

Articles Liés

Voir plus