Exemple de partage de l'implémentation jQuery de l'effet de défilement de la bannière publicitaire-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-30 14:44:34

original

1443 Les gens l'ont consulté

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>

Copier après la connexion

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!