Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Werbebanner-Scrolling-Effekts-js-Tutorial-php.cn

Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Werbebanner-Scrolling-Effekts

小云云

Freigeben： 2017-12-30 14:44:34

Original

1477 Leute haben es durchsucht

Dieser Artikel stellt jQuery hauptsächlich vor, um den Scroll-Effekt der Werbeleiste zu erzielen. Ich hoffe, dass er jedem helfen kann.

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Javascript-Tutorial zur Erzielung kreisförmiger Werbestreifeneffekte

HTML+CSS-Floating-Werbestreifen-Implementierung, Zerlegung_HTML/XHTML_Webseitenproduktion

JS-Implementierung des Floating-Werbestreifen-Codes, der oben auf der Website geschlossen werden kann_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung der jQuery-Implementierung des Werbebanner-Scrolling-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!