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

网页制作 2024/11/16 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

需求分析

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

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

html骨架

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

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

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

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

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"),   //获取第一个元素
           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();

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Html5,移动端,无缝滚动

标签：

Html5,移动端,无缝滚动

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“Html5移动端获奖无缝滚动动画实现示例”

暂无Html5移动端获奖无缝滚动动画实现示例的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

Html5,移动端,无缝滚动

使用Canvas操作像素的方法

video结合canvas实现视频在线截图功能

评论“Html5移动端获奖无缝滚动动画实现示例”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

Html5,移动端,无缝滚动

使用Canvas操作像素的方法

video结合canvas实现视频在线截图功能

评论“Html5移动端获奖无缝滚动动画实现示例”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存