suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Werbebanner-Scrolling-Effekts

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

小云云
小云云Original
2017-12-30 14:44:341437Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Plug-in DataTables-Paging-Entwicklungstechnologie-SharingNächster Artikel：jQuery-Plug-in DataTables-Paging-Entwicklungstechnologie-Sharing

In Verbindung stehende Artikel

Mehr sehen