Preisgekrönte nahtlose Scrolling-Animationsimplementierung für HTML5-Mobilterminals

In diesem Artikel wird hauptsächlich das Implementierungsbeispiel der preisgekrönten nahtlosen Scroll-Animation auf dem mobilen HTML5-Terminal vorgestellt. Ich werde es jetzt mit Ihnen teilen und als Referenz verwenden.

In diesem Artikel wird das Implementierungsbeispiel der preisgekrönten nahtlosen Scroll-Animation auf dem Html5-Mobilterminal vorgestellt. Die Details lauten wie folgt:

Anforderungsanalyse

Haha, das dynamische Bild oben ist wirklich großartig. Es wird klar.

Es rollt, rollt, also wie macht man das? Fassen wir zusammen:

HTML-Skelett

ist eigentlich ein festes Fenster und das innere

• Darin befindet sich eine Anzeigeanimation

  <p class="roll" id="roll">
      <ul>
           <li>第一个结构</li>
           <li>第二个结构</li>
           <li>第三个结构</li>
           <li>第四个结构</li>
           <li>第五个结构</li>
           <li>第六个结构</li>
           <li>第七个结构</li>
           <li>第八个结构</li>
      </ul>
  </p>

  Nach dem Login kopieren

  Grundlegender CSS-Stil

  Implementieren Sie zunächst den grundlegenden CSS-Stil

  *{
      margin:0;
      padding:0;
  }
  .roll{
      margin: 100px auto;
      width: 200px;
      height: 40px;
      overflow:hidden;
      border: 1px solid aquamarine;
  }
  .roll ul{
      list-style: none;
  }
  .roll li{
      line-height:20px;
      font-size:14px;
      text-align:center;
  }

  Nach dem Login kopieren

  Sie können einen groben Blick darauf werfen Stil:

  

  Implementierungsideen

  1. Verwendung der animierten Animation von jquery

  animate()-Methode

  $(selector).animate(styles,speed,easing,callback)

  Parameter:
  Stile: erforderliche Parameter, der CSS-Stil, der animiert werden muss (Benennung in Groß-/Kleinschreibung verwenden)
  Geschwindigkeit: Gibt die Geschwindigkeit der Animation an
  @number:1000(ms)
  @string:"slow", "normal", "fast"
  easing: Animationsgeschwindigkeit (swing, linear)
  Rückruf: Rückruffunktion

      $(document).ready(function(){
              setInterval(function(){  // 添加定时器，每1.5s进行转换
                  $("#roll").find("ul:first").animate({
                          marginTop:"-40px"  //每次移动的距离
                  },500,function(){   // 动画运动的时间
                          //$(this)指的是ul对象，
                          //ul复位之后把第一个元素和第二个元素插入
                          //到ul的最后一个元素的位置
                          $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                          $(this).find("li:first").appendTo(this);
                  });
              },1500)
          });

  Nach dem Login kopieren

  , nachdem die Funktion ausgeführt wurde, um den Effekt zu sehen:

  

  2. Verwenden Sie die CSS3-Animation

  Durch Keyframes in CSS3 können Sie den Effekt von Sprungschritten erzielen. Werfen wir zunächst einen kurzen Blick auf die Idee.

  Vorläufig

  1. Wenn es sich um eine hart geschriebene Auszeichnung handelt, müssen Sie die vorherige nach hinten kopieren. Kopieren Sie dann die erste. Wenn es zwei Schriftrollen gibt, kopieren Sie die erste und die zweite.

  <p class="roll" id="roll">
          <ul>
               <li>第一个结构</li>
               <li>第二个结构</li>
               <li>第三个结构</li>
               <li>第四个结构</li>
               <li>第五个结构</li>
               <li>第六个结构</li>
               <li>第七个结构</li>
               <li>第八个结构</li>
               <li>第一个结构</li>
               <li>第二个结构</li>
          </ul>
  </p>

  Nach dem Login kopieren

  2. Berechnen Sie dann, wie oft und wie viele Sekunden Sie scrollen müssen. Das Beispiel sind zwei Scrolls, die 5 Sekunden dauern, also beträgt die Animationszeit von CSS3 5 Sekunden. In wie viele Teile muss @keyframe unterteilt werden? Da es sich um eine Pause handelt, sind für jede Schriftrolle zwei Kopien erforderlich, und die letzte Schriftrolle muss springen, sodass nur eine Kopie vorhanden ist. Es sind also 5 * 2 - 1 = 9 Kopien erforderlich, wenn Sie sich den Code ansehen:

  /*这里不做兼容性处理*/
  .roll ul{
      list-style: none;
      animation: ani 5s  linear infinite;  /*动画ani，5s，循环匀速播放*/
  }
  @keyframes ani{  
      0%{
          margin-top: 0;
      }
      12.5%{
          margin-top: 0;
      }
      25%{
          margin-top: -40px;
      }
      37.5%{
          margin-top: -40px;
      }
      50%{
          margin-top: -80px;
      }
      62.5%{
          margin-top: -80px;
      }
      75%{
          margin-top: -120px;
      }
      87.5%{
          margin-top: -120px;
      }
      100%{
          margin-top: -160px; /*最后是一个，这样可以打断动画*/
      }
  }

  Nach dem Login kopieren

  Erweitert

  Wenn die Zahl unsicher ist, ist eine dynamische Berechnung erforderlich, um @keyframes bis dahin dynamisch hinzuzufügen Kann das Intervall und die Distanz der Bewegung berechnen, gut.

  Ermitteln Sie zuerst die Länge von

• . Berechnen Sie dann den Intervallprozentsatz. Denken Sie daran, die Anzahl der Sekunden × 2 zu verwenden Buchstabiere @keyframes mit einer Zeichenfolge, 0~Länge, einschließlich Länge, da es noch eine gibt, werden gerade Zahlen und ungerade Zahlen getrennt.
  4. Klonen Sie das erste und zweite in
  Attribute zu
  
  
  Lassen Sie uns ohne weiteres über den Code sprechen:
  

     function addKeyFrame(){
         var ulObj = $("#roll ul"),  //获取ul对象
               length = $("#roll li").length,  //获取li数组长度
               per = 100 / (length / 2 * 2 );  //计算中间间隔百分比
         // 拼接字符串
         var keyframes = `\    
         @keyframes ani{`;
         for(var i = 0 ; i<=length ; i++ ){
             keyframes+=`${i * per}%{
                             margin-top: ${i % 2 == 0 ? -i * 20 : -(i - 1) * 20}px;
                         }`;
         }
         keyframes+=&#39;}&#39;;
         var liFirst = $("#roll li:first"),   //获取第一个元素
             liSec = liFirst.next();    //获取第二个元素
         ulObj.append(liFirst.clone()).append(liSec.clone());   //将两个元素插入到ul里面
         $("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));    //创建style标签把关键帧插入到头部
         ulObj.css("animation","ani 5s linear infinite");  //给ul添加css3动画
     }
     addKeyFrame();

  Nach dem Login kopieren
  
  
  3 Auf der mobilen Seite gibt es keine Animationsfunktion, wenn Sie keine CSS3-Attribute verwenden. Wie können Sie sie dann in JS schreiben?

  var timer,top;
  function roll(){
      var ulObj = $("#roll").find("ul"),
          length = $("#roll li").length,  
          liFirst = $("#roll").find("li:first");
          liSec = liFirst.next();
      ulObj.append(liFirst.clone()).append(liSec.clone());  //把第一个第二个都添加到<ul>标签中
      clearInterval(timer);
      timer = setInterval(function(){  //设置定时器
          var top = ulObj.css("margin-top");
          top = +top.slice(0,-2);
          if(top != -(20 * length)){  //获取现在的高度如果没有到最后就上移
              top -= 40;
              ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
          }else{  //如果到了最后就迅速到零
              top = 0;
              ulObj.css({"-webkit-transition":"none","transition":"none","margin-top":top});
              setTimeout(function(){  //这里加一个延时器，也是要放在队列最后去执行，为了避免两个动画合并
                  top -= 40;
                  ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-top":top});
              },0)
          }
      },2000);
  }
  
  roll();

  Nach dem Login kopieren
  Wenn es andere Methoden gibt, werde ich sie beim nächsten Mal von Zeit zu Zeit aktualisieren. Aber für Mobilgeräte sollten diese ausreichen.

  Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

  Verwandte Empfehlungen:

  Verwendung von HTML5 Canvas zur Implementierung von Masturbationsspielen

  HTML5 Canvas zur Implementierung einer pixelbreiten Dünnzeichnung Zeile

  
  

  So verwenden Sie Canvas zum Implementieren von Bildmosaiken

  
  

  Das obige ist der detaillierte Inhalt vonPreisgekrönte nahtlose Scrolling-Animationsimplementierung für HTML5-Mobilterminals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!