Html5挪移端获奖无缝滚动动画实现--百分百源码网

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

发布时间：09/01 来源：未知浏览：关键词：

这篇文章主要介绍了Html5挪移端获奖无缝滚动动画实现示例，内容挺不错的，此刻分享给大家，也给大家做个参照。这篇文章主要介绍了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.第一猎取