原生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. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  2. CISP/CISA 每日一题 22

    CISSP 每日一题(答)What should be done to verify patcheshave been applied? Auditpatches, or use a vulnerab ...

  3. Android 手机插入电脑后提示“”ADB Interface"安装失败的问题

    安装ADB Interface 1. Android Studio开发时,如果在真机上测试并不是那么的顺利.直接将手机插入电脑,并不能识别.往往提示ADB Interface驱动未安装.如下图所示. ...

  4. ubuntu-系统卡慢解决（转载）

    ubuntu系统狠慢 或者很卡的原因 1.  涉及内存小或者虚拟SWAP分区调整问题    可以通过 系统监视器 进行查看      在UBUNTU系统里面,并不是你的物理内存全部耗尽之后,系统才使用 ...

  5. Hibernate3.5.4---java application的xml和annotation环境搭建（hibernate.cfg.xml配置文件说明，映射文件Student.hbm.xml说明

    http://blog.csdn.net/centre10/article/details/6050466 来自于:http://blog.csdn.net/centre10/article/deta ...

  6. 【Codeforces Round #432 (Div. 2) A】 Arpa and a research in Mexican wave

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] t<=k,输出t t>=n,输出k-t+n 其他情况都是k [错的次数] 0 [反思] 在这了写反思 [代码] /* */ #in ...

  7. Stable Matching (Gale Sharpley Algorithm)

    稳定婚配问题:n个男生n个女生.当中每一个人都有自己心仪的列表. 问怎样达成稳定的匹配(比方, b想B求婚,可是B已有的对象的优先级高于b,此时b的魅力不足以拆散B所处的那一对,即达到稳定状态.) ( ...

  8. 为SSO 5.5恢复忘记的administrator@vsphere.local密码

    转自:http://blog.itpub.net/27042095/viewspace-1179938/ 1. cd \Program Files\VMware\Infrastructure\VMwa ...

  9. Android OnGestureListener用法 识别用户手势 左右滑动

    Android可以识别用户的手势(即用户用手指滑动的方向),通过用户不同的手势,从而做出不同的处理 需要使用OnGestureListener 比如说看电子书的时候翻页,或者要滑动一些其他内容 直接上 ...

  10. 关于stm32加不进.h文件的问题

    把路径也设置好了,但是.h文件加入不进去, 编译的时候.h文件也出来了 那是因为.h或对应的.c文件中存在错误,改掉错误就能成功,有时候keil不会报错,可能是因为定义变量没有定义好 如果显示某个变量 ...