原生js如何实现图片翻转旋转效果？

一、总结

1、通过给元素设置style中的transition来实现的。

2、我昨天纠结的效果全部可以通过精读这个代码后实现。

二、原生js如何实现图片翻转旋转效果？

1、效果图

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         #imgWrap {

             width: 800px;

             height: 350px;

             margin: 80px auto;

             perspective: 800px;

         }

         #imgWrap img {

             float: left;

             height: 80px;

             width: 80px;

             border: 1px solid #eee;

         }

         #btn {

             width: 100px;

             text-align: center;

             font: 16px/40px Arial, Verdana;

             color: #fff;

             padding: 0 20px;

             background: rgb(0, 100, 0);

             margin: 0 auto;

             border-radius: 5px;

             cursor: pointer;

             box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

         }

     </style>

     <script type="text/javascript">

         /*

          *  1.闪烁效果（瞬间将宽高都变为0，scale，并且是随机的）

          *  2.图片从小到大，同时透明度从1变成0（必须是当前图片上一步效果走完了，才会开始）

          *  3.图片旋转，同时透明度从0变成1，有层次感（位移translate）（当所有图片透明度都变为0的时候，才会开始）

          */

         window.onload = function () {

             var btn = document.getElementById('btn');

             var imgs = document.querySelectorAll('img');

             var allEnd = 0;//用来判断所有的图片是否都完成了所有的运动步骤

             var on = true;//用来决定用户是否可以再次点击

             //给btn添加点击事件

             btn.onclick = function () {

                 console.log("on:" + on);

                 if (!on) {

                     return;

                 }

                 on = false;

                 var endNum = 0;//运动完成的图片数量

                 for (var i = 0; i < imgs.length; i++) {

                     //写成自执行函数的原因：for循环速度很快，将会导致setTimeout中的i找不到值

                     (function (i) {

                         setTimeout(function () {

                             montion(imgs[i], '10ms', function () {

                                 this.style.transform = 'scale(0)';//因为函数用了call函数，所以可以用this，否则只能用imgs[i]

                             }, function () {

                                 //第二步的运动从这里开始

                                 montion(this, '1s', function () {

                                     this.style.transform = "scale(1)";

                                     this.style.opacity = 0;

                                 }, function () {

                                     endNum++;//只要有一张图片完成了第二步，则加1

                                     if (endNum === imgs.length) {

                                         toBig();

                                     }

                                 })

                             });

                         }, Math.random() * 1000);

                     })(i);

                 }

                 //定时器，用来延迟时间，不让图片同步所放

             };

             //第三个运动效果

             function toBig() {

                 /*

                  *坐标轴，x,y,z

                  */

                 for (var i = 0; i < imgs.length; i++) {

                     imgs[i].style.transition = '';

                     // imgs[i].style.opacity='1';

                     //想要一个物体有css3中的动作变化，那就需要给它一个初始值

                     imgs[i].style.transform = 'rotateY(0deg) translateZ(-' + Math.random() *  + 'px)';

                     //自执行函数的目的是，为了找到i，否则for循环执行太快，会找不到i

                     (function (i) {

                         setTimeout(function () {

                             montion(imgs[i], '2s', function () {

                                 this.style.opacity = 1;

                                 this.style.transform = 'rotateY(-360deg) translateZ(0)'

                             }, function () {

                                 allEnd++;

                                 if (allEnd === imgs.length) {

                                     console.log("allEnd:" + allEnd + ',imgs.length:' + imgs.length);

                                     //这个条件成立，说明所有的图片都运动完了，接下来才允许再次点击

                                     //当所有运动完了以后，才允许再次点击

                                     on = true;

                                     allEnd = 0;

                                 }

                             });

                         }, Math.random() * 1000);

                     })(i);

                 }

             }

             //运动函数(运动的对象，运动的时间，运动的属性函数，运动完成后要做的事情)

             function montion(obj, time, doFn, callBack) {

                 obj.style.transition = time;

                 doFn.call(obj);//调用函数，并且把this的指向给obj

                 var called = false;//这里的原因是为了解决transitionend调用多次的bug

                 obj.addEventListener('transitionend', function () {

                     if (!called) {

                         callBack && callBack.call(obj);//解决如果没有传入第四个callBack参数的问题

                         called = true;

                     }

                 }, false);//事件三阶段，第三个参数决定是在捕获阶段还是冒泡阶段，调用此函数,false代表是在冒泡阶段

             }

         }

     </script>

 </head>

 <body>

 <div id="imgWrap">

     <img src="https://dummyimage.com/1:1x100&text=1" alt="">

     <img src="https://dummyimage.com/1:1x100&text=2" alt="">

     <img src="https://dummyimage.com/1:1x100&text=3" alt="">

     <img src="https://dummyimage.com/1:1x100&text=4" alt="">

     <img src="https://dummyimage.com/1:1x100&text=5" alt="">

     <img src="https://dummyimage.com/1:1x100&text=6" alt="">

     <img src="https://dummyimage.com/1:1x100&text=7" alt="">

     <img src="https://dummyimage.com/1:1x100&text=8" alt="">

     <img src="https://dummyimage.com/1:1x100&text=9" alt="">

     <img src="https://dummyimage.com/1:1x100&text=10" alt="">

     <img src="https://dummyimage.com/1:1x100&text=11" alt="">

     <img src="https://dummyimage.com/1:1x100&text=12" alt="">

     <img src="https://dummyimage.com/1:1x100&text=13" alt="">

     <img src="https://dummyimage.com/1:1x100&text=14" alt="">

     <img src="https://dummyimage.com/1:1x100&text=15" alt="">

     <img src="https://dummyimage.com/1:1x100&text=16" alt="">

     <img src="https://dummyimage.com/1:1x100&text=17" alt="">

     <img src="https://dummyimage.com/1:1x100&text=18" alt="">

     <img src="https://dummyimage.com/1:1x100&text=19" alt="">

     <img src="https://dummyimage.com/1:1x100&text=20" alt="">

     <img src="https://dummyimage.com/1:1x100&text=21" alt="">

     <img src="https://dummyimage.com/1:1x100&text=22" alt="">

     <img src="https://dummyimage.com/1:1x100&text=23" alt="">

     <img src="https://dummyimage.com/1:1x100&text=24" alt="">

     <img src="https://dummyimage.com/1:1x100&text=25" alt="">

     <img src="https://dummyimage.com/1:1x100&text=26" alt="">

     <img src="https://dummyimage.com/1:1x100&text=27" alt="">

     <img src="https://dummyimage.com/1:1x100&text=28" alt="">

     <img src="https://dummyimage.com/1:1x100&text=29" alt="">

     <img src="https://dummyimage.com/1:1x100&text=30" alt="">

     <img src="https://dummyimage.com/1:1x100&text=31" alt="">

     <img src="https://dummyimage.com/1:1x100&text=32" alt="">

     <img src="https://dummyimage.com/1:1x100&text=33" alt="">

     <img src="https://dummyimage.com/1:1x100&text=34" alt="">

     <img src="https://dummyimage.com/1:1x100&text=35" alt="">

     <img src="https://dummyimage.com/1:1x100&text=36" alt="">

     <img src="https://dummyimage.com/1:1x100&text=37" alt="">

     <img src="https://dummyimage.com/1:1x100&text=38" alt="">

     <img src="https://dummyimage.com/1:1x100&text=39" alt="">

     <img src="https://dummyimage.com/1:1x100&text=40" alt="">

     <img src="https://dummyimage.com/1:1x100&text=41" alt="">

     <img src="https://dummyimage.com/1:1x100&text=42" alt="">

     <img src="https://dummyimage.com/1:1x100&text=43" alt="">

     <img src="https://dummyimage.com/1:1x100&text=44" alt="">

     <img src="https://dummyimage.com/1:1x100&text=45" alt="">

 </div>

 <div id="btn">点击查看效果</div>

 </body>

 </html>

三、测试题-简答题

1、js代码可以加到head标题里面么？

解答：可以。加到window的onload方法里面。

2、js代码加到head标签里面怎么样才能获取到元素？

解答：代码写到window的onload里面。 window.onload = function () {} 。

3、如何实现一个函数在另外一个函数执行完成后执行？

解答：不停的判断上一个函数里面的元素是否准备就绪，如果所有元素都准备就绪，if成立就执行函数。

原生js如何实现图片翻转旋转效果？的更多相关文章

  1. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  2. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  3. 原生JS实现异步图片上传（预览）

    效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...

  4. 原生js - 两种图片懒加载实现原理

    目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...

  5. 原生JS，实现图片可拖拽，并且移动四个角和四条变能够自由变换图片大小

    网上搜的资料,源码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. 原生Js页面滚动延迟加载图片

    原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...

  7. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  8. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  9. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

随机推荐

  1. BZOJ2119: 股市的预测（后缀数组）

    Description 墨墨的妈妈热爱炒股,她要求墨墨为她编写一个软件,预测某只股票未来的走势.股票折线图是研究股票的必备工 具,它通过一张时间与股票的价位的函数图像清晰地展示了股票的走势情况.经过长 ...

  2. TC快速搜索在win10下不可用

    今天突然发现TC的快速搜索在win10下突然不可用,按Ctrl + s 呼出快速搜索栏后半天不响应也无法输入文字.论坛里给出来的建议是将 QuickSearch 2.2.3 升级到 2.2.6,目前插 ...

  3. 《WPF》Expander控件简单美化

    示例图: Expander控件功能很常见, 一般用于系统左侧的菜单收缩面板. 1.主要的组成 一个头部(header) 和 一个 内容(content) 组成. <Expander Expand ...

  4. 让我们彻底看清MVC、MVP

    这里開始记录下来自己对MVC.MVP.MVVM这三种框架模式的理解,本文从以下几个方面来梳理. 架构的目的 框架模式.设计模式 MVC设计的介绍 MVC在Android中的应用 MVC该怎样设计 MV ...

  5. dot 语法全介绍

    0. 保存 保存为 pdf:dot -Tpdf iris.dot -o iris.pdf 1. 基本 (1)无向图.有向图.子图 graph G {} // 无向图 digraph G {} // 有 ...

  6. 福昕pdf阅读器如何删除所有注释

    然后选中第一个 移动到最后按住shift,选择最后一个, 总之就是选中所有的 然后右键,点击删除即可. 不要忘记保存呦

  7. Android实践 -- 对apk进行系统签名

    对apk进行系统签名 签名工具 网盘下载 ,需要Android系统的签名的文件 platform.x509.pem 和 platform.pk8 这个两个文件在Android源码中的 ./build/ ...

  8. java中Arrays类的应用

    java.util.Arrays类能方便地操作数组,它提供的所有方法都是静态的.具有以下功能: ² 给数组赋值:通过fill方法. ² 对数组排序:通过sort方法,按升序. ² 比较数组:通过equ ...

  9. Static关键字深入理解

    1.static变量 按照是否静态的对类成员变量进行分类可分两种:一种是被static修饰的变量,叫静态变量或类变量:另一种是没有被static修饰的变量,叫实例变量. 两者的区别是: 对于静态变量在 ...

  10. UVA 11280 - Flying to Fredericton SPFA变形

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&c ...