Html5移动端获奖无缝滚动动画实现

本文介绍了Html5移动端获奖无缝滚动动画实现示例，分享给大家，具体如下：

需求分析

哈哈，上动态图真的是一下就明了了。

就是滚动么滚动，那么制作这个有什么方法呢？我们来总结一下:

html骨架

其实很简单，最外面的

是做固定的窗口，里面的

控制运动，
• 里面是展示动画

  
      
  
           
  第一个结构
           
  第二个结构
           
  第三个结构
           
  第四个结构
           
  第五个结构
           
  第六个结构
           
  第七个结构
           
  第八个结构
      
  

  基本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;
  }

  可以看看大致的样式:

  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.如果是写死的获奖，那么需要把前面的那个复制一份到后面去，如果是一个一个滚动那么就复制第一个，如果是两个两个滚动的就复制第一个和第二个。

  
          
  
               
  第一个结构
               
  第二个结构
               
  第三个结构
               
  第四个结构
               
  第五个结构
               
  第六个结构
               
  第七个结构
               
  第八个结构
               
  第一个结构
               
  第二个结构
          
  

  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.首先获取

• 的长度length
  2.然后计算间隔百分比，因为有停顿所以记得要用秒数×2
  3.然后用字符串拼写@keyframes，0~length，包括length，因为多一个，双数和单数分开。
  4.把
  中的第一个和第二个克隆到
  的最后
  5.创建一个标签加入到中
  6.给
  添加动画属性

  话不多说上代码：

     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里面
         $("").attr("type","text/css").html(keyframes).appendTo($("head"));    //创建style标签把关键帧插入到头部
         ulObj.css("animation","ani 5s linear infinite");  //给ul添加css3动画
     }
     addKeyFrame();

  三、zepto+transition实现

  移动端的zepto没有animate函数，如果不用css3的属性，那如何用js去写？

  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());  //把第一个第二个都添加到
  标签中
      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();

  如果还有别的方法，下次我会不定期更新的。不过移动端的话这几个应该够用了。

  以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！