Html5行動端獲獎無縫滾動動畫實現

這篇文章主要介紹了Html5行動裝置獲獎無縫滾動動畫實現範例，內容挺不錯的，現在分享給大家，也給大家做個參考。

本文介紹了Html5行動裝置獲獎無縫滾動動畫實現範例，分享給大家，具體如下：

需求分析

哈哈，上動態圖真的是一下就明了。

就是滾動麼滾動，那麼製作這個有什麼方法呢？讓我們來總結一下:

html骨架

其實很簡單，最外面的

是做固定的窗口，裡面的

控制運動，
• 裡面是展示動畫

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

  #基本css樣式

  先把基本的css樣式實作

  *{
      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;
  }

  可以看看大致的樣式:

  

  #實現想法

  
  
  
  
  
  
  

  

  ##animate()方法

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

  
  
  參數：
  styles:必需參數，需要產生動畫的css樣式(使用駝峰式命名)
  speed: 規定動畫的速度
  @number:1000(ms)

  @string:"slow","normal","fast "

  easing:動畫速度（swing,linear）

  callback:函數執行完之後的回呼函數

      $(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)
          });

  看看效果:
  #二、使用css3的animation動畫

  透過css3中的關鍵幀，可以得到跳步的效果。先透過一個短的看一下思路。

  初步
  

  1.如果是寫死的獲獎，那麼需要把前面的那個複製一份到後面去，如果是一個一個滾動那麼就複製第一個，如果是兩個兩個滾動的就複製第一個和第二個。

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

  2.然後計算需要滾動多少次，一次多少秒,例子是兩個兩個滾動，需要5s，所以css3的animation的時間是5s。那麼@keyframe需要分成幾份呢？因為是停頓，每一個滾動都需要兩份，最後一個要跳動所以只有一份，所以需要5 * 2 - 1 = 9份，看代碼就曉得了：

  /*这里不做兼容性处理*/
  .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; /*最后是一个，这样可以打断动画*/
      }
  }

  
  

  #進階
  

  如果個數不確定，那麼就需要動態的計算，用js動態地加入@keyframes ，到時候只要自己可以計算清楚間隔還有移動的距離就好。

  1.首先取得

• 的長度length2.然後計算間隔百分比，因為有停頓所以記得要用秒數×2
  3.然後用字串拼字@keyframes ，0~length，包括length，因為多一個，雙數和單數分開。 ###4.把
  中的第一個和第二個克隆到
  的最後###5.創建一個