原生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. 【Codeforces Round #451 (Div. 2) B】Proper Nutrition

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以直接一层循环枚举. 也可以像我这样用一个数组来存y*b有哪些. 当然.感觉这样做写麻烦了.. [代码] /* 1.Shoud i ...

  2. FreeNX

    freenx 在Linux下,我们最常使用的远程管理工具是ssh客户端,比如putty.SecureCRT等,但是ssh只提供字符界面的操作方式,有时我们需要图形界面的操作,在Linux下支持图形界面 ...

  3. Express框架是什么

    Express框架是什么 一.总结 1.express框架:基于node.js的web应用框架,可快速搭建一个完整功能的网站,丰富的HTTP工具以及来自Connect框架的中间件随取随用. 二.Exp ...

  4. HTML基础第五讲---控制表格及其表项的对齐方式

    转自:https://i.cnblogs.com/posts?categoryid=1121494 缺省情况下,表格在浏览器屏幕上左对齐,你可以使用<TABLE>的ALIGN属性来指定表格 ...

  5. menuconfig_kconfig

    这一节的主要内容: Menuconfig的操作 Kconfig和.config文件 Linux内核配置裁剪实验 linux编译器通过.config文件确认哪些代码编译进内核,哪些被裁减掉 menuco ...

  6. 机器学习分支：active learning、incremental learning、online machine learning

    1. active learning Active learning 是一种特殊形式的半监督机器学习方法,该方法允许交互式地询问用户(或者其他形式的信息源 information source)以获取 ...

  7. 【高德地图API】从零開始学高德JS API（五）路线规划——驾车|公交|步行

    先来看两个问题:路线规划与导航有什么差别?步行导航与驾车导航有什么差别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自己定义路线规划功能,这是别家没有 ...

  8. PHP URL参数获取方式的四种例子

    在已知URL参数的情况下,我们可以根据自身情况采用$_GET来获取相应的参数信息($_GET['name']);那,在未知情况下如何获取到URL上的参数信息呢? 第一种.利用$_SERVER内置数组变 ...

  9. HDU 2147kiki's game

    KIKI和zz一起玩跳棋游戏,KIKI先.跳棋棋盘有n行m列.在顶行的最右侧位置放上一枚硬币.每次每个人可以把硬币移动到左边,下边或是左下边的空格中.最后不能移动硬币的那个人将输掉比赛. P点:即必败 ...

  10. tensorflow：图（Graph）的核心数据结构与通用函数（Utility function）

    Tensorflow一些常用基本概念与函数(2) 1. 图(Graph)的核心数据结构 tf.Graph.__init__:建立一个空图: tf.Graph.as_default():一个将某图设置为 ...