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

一、总结

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

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

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

1、效果图

2、代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <style type="text/css">
  7.          #imgWrap {
  8.              width: 800px;
  9.              height: 350px;
  10.              margin: 80px auto;
  11.              perspective: 800px;
  12.          }
  13.  
  14.          #imgWrap img {
  15.              float: left;
  16.              height: 80px;
  17.              width: 80px;
  18.              border: 1px solid #eee;
  19.          }
  20.  
  21.          #btn {
  22.              width: 100px;
  23.              text-align: center;
  24.              font: 16px/40px Arial, Verdana;
  25.              color: #fff;
  26.              padding: 0 20px;
  27.              background: rgb(0, 100, 0);
  28.              margin: 0 auto;
  29.              border-radius: 5px;
  30.              cursor: pointer;
  31.              box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  32.          }
  33.      </style>
  34.      <script type="text/javascript">
  35.          /*
  36.           *  1.闪烁效果（瞬间将宽高都变为0，scale，并且是随机的）
  37.           *  2.图片从小到大，同时透明度从1变成0（必须是当前图片上一步效果走完了，才会开始）
  38.           *  3.图片旋转，同时透明度从0变成1，有层次感（位移translate）（当所有图片透明度都变为0的时候，才会开始）
  39.           */
  40.          window.onload = function () {
  41.              var btn = document.getElementById('btn');
  42.              var imgs = document.querySelectorAll('img');
  43.              var allEnd = 0;//用来判断所有的图片是否都完成了所有的运动步骤
  44.              var on = true;//用来决定用户是否可以再次点击
  45.  
  46.              //给btn添加点击事件
  47.              btn.onclick = function () {
  48.                  console.log("on:" + on);
  49.                  if (!on) {
  50.                      return;
  51.                  }
  52.                  on = false;
  53.                  var endNum = 0;//运动完成的图片数量
  54.  
  55.                  for (var i = 0; i < imgs.length; i++) {
  56.                      //写成自执行函数的原因：for循环速度很快，将会导致setTimeout中的i找不到值
  57.                      (function (i) {
  58.                          setTimeout(function () {
  59.                              montion(imgs[i], '10ms', function () {
  60.                                  this.style.transform = 'scale(0)';//因为函数用了call函数，所以可以用this，否则只能用imgs[i]
  61.                              }, function () {
  62.                                  //第二步的运动从这里开始
  63.                                  montion(this, '1s', function () {
  64.                                      this.style.transform = "scale(1)";
  65.                                      this.style.opacity = 0;
  66.                                  }, function () {
  67.                                      endNum++;//只要有一张图片完成了第二步，则加1
  68.                                      if (endNum === imgs.length) {
  69.                                          toBig();
  70.                                      }
  71.                                  })
  72.                              });
  73.                          }, Math.random() * 1000);
  74.                      })(i);
  75.  
  76.                  }
  77.                  //定时器，用来延迟时间，不让图片同步所放
  78.              };
  79.  
  80.              //第三个运动效果
  81.              function toBig() {
  82.                  /*
  83.                   *坐标轴，x,y,z
  84.                   */
  85.                  for (var i = 0; i < imgs.length; i++) {
  86.                      imgs[i].style.transition = '';
  87.                      // imgs[i].style.opacity='1';
  88.                      //想要一个物体有css3中的动作变化，那就需要给它一个初始值
  89.                      imgs[i].style.transform = 'rotateY(0deg) translateZ(-' + Math.random() *  + 'px)';
  90.                      //自执行函数的目的是，为了找到i，否则for循环执行太快，会找不到i
  91.                      (function (i) {
  92.                          setTimeout(function () {
  93.                              montion(imgs[i], '2s', function () {
  94.                                  this.style.opacity = 1;
  95.                                  this.style.transform = 'rotateY(-360deg) translateZ(0)'
  96.                              }, function () {
  97.                                  allEnd++;
  98.                                  if (allEnd === imgs.length) {
  99.                                      console.log("allEnd:" + allEnd + ',imgs.length:' + imgs.length);
  100.                                      //这个条件成立，说明所有的图片都运动完了，接下来才允许再次点击
  101.                                      //当所有运动完了以后，才允许再次点击
  102.                                      on = true;
  103.                                      allEnd = 0;
  104.                                  }
  105.                              });
  106.                          }, Math.random() * 1000);
  107.                      })(i);
  108.                  }
  109.              }
  110.  
  111.              //运动函数(运动的对象，运动的时间，运动的属性函数，运动完成后要做的事情)
  112.              function montion(obj, time, doFn, callBack) {
  113.                  obj.style.transition = time;
  114.                  doFn.call(obj);//调用函数，并且把this的指向给obj
  115.  
  116.                  var called = false;//这里的原因是为了解决transitionend调用多次的bug
  117.  
  118.                  obj.addEventListener('transitionend', function () {
  119.                      if (!called) {
  120.                          callBack && callBack.call(obj);//解决如果没有传入第四个callBack参数的问题
  121.                          called = true;
  122.                      }
  123.  
  124.                  }, false);//事件三阶段，第三个参数决定是在捕获阶段还是冒泡阶段，调用此函数,false代表是在冒泡阶段
  125.              }
  126.          }
  127.      </script>
  128.  </head>
  129.  <body>
  130.  <div id="imgWrap">
  131.      <img src="https://dummyimage.com/1:1x100&text=1" alt="">
  132.      <img src="https://dummyimage.com/1:1x100&text=2" alt="">
  133.      <img src="https://dummyimage.com/1:1x100&text=3" alt="">
  134.      <img src="https://dummyimage.com/1:1x100&text=4" alt="">
  135.      <img src="https://dummyimage.com/1:1x100&text=5" alt="">
  136.      <img src="https://dummyimage.com/1:1x100&text=6" alt="">
  137.      <img src="https://dummyimage.com/1:1x100&text=7" alt="">
  138.      <img src="https://dummyimage.com/1:1x100&text=8" alt="">
  139.      <img src="https://dummyimage.com/1:1x100&text=9" alt="">
  140.      <img src="https://dummyimage.com/1:1x100&text=10" alt="">
  141.      <img src="https://dummyimage.com/1:1x100&text=11" alt="">
  142.      <img src="https://dummyimage.com/1:1x100&text=12" alt="">
  143.      <img src="https://dummyimage.com/1:1x100&text=13" alt="">
  144.      <img src="https://dummyimage.com/1:1x100&text=14" alt="">
  145.      <img src="https://dummyimage.com/1:1x100&text=15" alt="">
  146.      <img src="https://dummyimage.com/1:1x100&text=16" alt="">
  147.      <img src="https://dummyimage.com/1:1x100&text=17" alt="">
  148.      <img src="https://dummyimage.com/1:1x100&text=18" alt="">
  149.      <img src="https://dummyimage.com/1:1x100&text=19" alt="">
  150.      <img src="https://dummyimage.com/1:1x100&text=20" alt="">
  151.      <img src="https://dummyimage.com/1:1x100&text=21" alt="">
  152.      <img src="https://dummyimage.com/1:1x100&text=22" alt="">
  153.      <img src="https://dummyimage.com/1:1x100&text=23" alt="">
  154.      <img src="https://dummyimage.com/1:1x100&text=24" alt="">
  155.      <img src="https://dummyimage.com/1:1x100&text=25" alt="">
  156.      <img src="https://dummyimage.com/1:1x100&text=26" alt="">
  157.      <img src="https://dummyimage.com/1:1x100&text=27" alt="">
  158.      <img src="https://dummyimage.com/1:1x100&text=28" alt="">
  159.      <img src="https://dummyimage.com/1:1x100&text=29" alt="">
  160.      <img src="https://dummyimage.com/1:1x100&text=30" alt="">
  161.      <img src="https://dummyimage.com/1:1x100&text=31" alt="">
  162.      <img src="https://dummyimage.com/1:1x100&text=32" alt="">
  163.      <img src="https://dummyimage.com/1:1x100&text=33" alt="">
  164.      <img src="https://dummyimage.com/1:1x100&text=34" alt="">
  165.      <img src="https://dummyimage.com/1:1x100&text=35" alt="">
  166.      <img src="https://dummyimage.com/1:1x100&text=36" alt="">
  167.      <img src="https://dummyimage.com/1:1x100&text=37" alt="">
  168.      <img src="https://dummyimage.com/1:1x100&text=38" alt="">
  169.      <img src="https://dummyimage.com/1:1x100&text=39" alt="">
  170.      <img src="https://dummyimage.com/1:1x100&text=40" alt="">
  171.      <img src="https://dummyimage.com/1:1x100&text=41" alt="">
  172.      <img src="https://dummyimage.com/1:1x100&text=42" alt="">
  173.      <img src="https://dummyimage.com/1:1x100&text=43" alt="">
  174.      <img src="https://dummyimage.com/1:1x100&text=44" alt="">
  175.      <img src="https://dummyimage.com/1:1x100&text=45" alt="">
  176.  </div>
  177.  <div id="btn">点击查看效果</div>
  178.  </body>
  179.  </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. MySQL 5.7 多实例安装部署实例

    1. 背景  MySQL数据库的集中化运维,可以通过在一台服务器上,部署运行多个MySQL服务进程,通过不同的socket监听不同的服务端口来提供各自的服务.各个实例之间是相互独立的,每个实例的dat ...

  2. 栅格数据AE

    转自原文 栅格数据AE 两个星期以来一直与栅格数据打交道,对AO的栅格部分应该有了一定的理解,下面是自己的一点体会,希望高手指教:-) 1.栅格数据的存储类型 栅格数据一般可以存储为ESRI GRID ...

  3. 用VBS控制鼠标，在Excel2010、2013，64位中

    原作者文章地址:http://demon.tw/programming/vbs-control-mouse.html 感谢原作者的攻略.才使我学会用VBS控制鼠标. 但是问题接踵而至,Excel200 ...

  4. 程序是怎么跑起来的？ —— CPU 是什么？C/C++程序的运行

    1. 概念初步 程序:计算机的程序,和做饭.运动会的程序一样,指的是"做事的先后次序": 程序的组成:程序是指令(及物动词)和数据(宾语)的组合体: C 语言 printf(&qu ...

  5. Flume Source官网剖析(博主推荐）

    不多说,直接上干货! 一切来源于flume官网 http://flume.apache.org/FlumeUserGuide.html Flume Sources Avro Source Thrift ...

  6. Ubuntu 12.04 64bit GCC交叉编译器制作 原创

                                                                                                        ...

  7. t_user is not mapped [from t_user as u where u.loginname = :loginname and u.password =:password]

    转自:https://blog.csdn.net/u010876380/article/details/52714539 错误: Struts Problem Report Struts has de ...

  8. 细说GCD

    http://blog.csdn.net/hsf_study/article/details/51637453

  9. OpenJDK源码研究笔记(十六):在Java中使用JavaScript脚本语言

    友情提示 本文主要参考了51CTO上的一篇文章,代码经过自己的模仿和整理,还算凑合. 本文中的代码注释比较多,不再过多解释. 更多用法,还是得看JDK的API或者看原文http://developer ...

  10. 《从零開始学Swift》学习笔记（Day 63）——Cocoa Touch设计模式及应用之单例模式

    原创文章,欢迎转载.转载请注明:关东升的博客 什么是设计模式.设计模式是在特定场景下对特定问题的解决方式.这些解决方式是经过重复论证和測试总结出来的. 实际上.除了软件设计,设计模式也被广泛应用于其它 ...