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


Posted in HTML / CSS onJune 25, 2018

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

需求分析

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

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

可以看看大致的样式:

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

实现思路

一、使用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)
        });

看看效果:

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

二、使用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();

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 #HTML / CSS
详解Canvas事件绑定
Jun 27 #HTML / CSS
Html5剪切板功能的实现代码
Jun 29 #HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 #HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 #HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 #HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 #HTML / CSS
You might like
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
PHP错误处理函数
2016/04/03 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
javascript每日必学之循环
2016/02/19 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
Hadoop中的Python框架的使用指南
2015/04/22 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
Delphi笔试题
2016/11/14 面试题
公司联欢会主持词
2015/07/04 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang