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

时间2024-01-23 13:44:31发布访客分类HTML浏览297

导读：收集整理的这篇文章主要介绍了Html5移动端获奖无缝滚动动画实现，觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章主要介绍了HtML5移动端获奖无缝滚动动画实现示例，内容挺不错的，现在分享给大家，也给大家做个参考。本文介绍了Html...

收集整理的这篇文章主要介绍了Html5移动端获奖无缝滚动动画实现，觉得挺不错的，现在分享给大家，也给大家做个参考。这篇文章主要介绍了HtML5移动端获奖无缝滚动动画实现示例，内容挺不错的，现在分享给大家，也给大家做个参考。

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

需求分析

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

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

html骨架

其实很简单，最外面的p> 是做固定的窗口，里面的ul> 控制运动，li> 里面是展示动画

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

可以看看大致的样式:

实现思路

一、使用jquery的aniMATE动画

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

话不多说上代码：

   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+='}
    ';
           var liFirst = $("#roll li:first"),   //@R_438_777@           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();

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

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

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