原生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. itchat转发指定的微信群里某个用户的发言到指定的群

    复读机功能, 如果有比较多的用户,超出500人,那就得分开至少两个群,如何把一些消息自动复制到另一个群呢. 自动转发指定用户的发言,转发到别的群 # !/usr/bin/env python # -* ...

  2. Method for address space layout randomization in execute-in-place code

    The present application relates generally to laying out address space for execute-in-place code and, ...

  3. activity-栈相关属性

    1.启动任务栈 第一种,动作设置为“android.intent.action.MAIN”,类别设置为“android.intent.category.LAUNCHER”,可以使这个ACT(activ ...

  4. amazeui学习笔记二（进阶开发3）--HTML/CSS规范Rules

    amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...

  5. Flume Sink Processors官网剖析（博主推荐）

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...

  6. python 序列排序 排序后返回相应的索引

    https://blog.csdn.net/longwei92/article/details/83098289 https://blog.csdn.net/u013731339/article/de ...

  7. input输入框获得、失去焦点添加事件

    onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: <input type="text" onB ...

  8. windows CE项目开发

    软件列表 1.Windows mobile 设备中心 2.Microsoft visual Studio 2008 3.串口调试工具(sscom42.exe) 4.Wince 6.0模拟器 5.vir ...

  9. 【Codeforces Round #450 (Div. 2) B】Position in Fraction

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找循环节就好. ->其实可以不用找出来整个循环节. 有找到c就直接输出. 找到了循环节还没找到的话,直接输出无解. [代码] ...

  10. 怎么做好看的html5游戏界面

    怎么做好看的html5游戏界面 一.总结 一句话总结:html5应该是完全可以做特别好看的游戏界面的.最下面那个背景图完全是一张图片动的雪和小动物可以是gif,或者是canvas,右边的那各个选择框就 ...