原生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. 洛谷 P1327 数列排序

    P1327 数列排序 题目描述 给定一个数列{an},这个数列满足ai≠aj(i≠j),现在要求你把这个数列从小到大排序,每次允许你交换其中任意一对数,请问最少需要几次交换? 输入输出格式 输入格式: ...

  2. ProgressBar-style属性分析

    首先我们看下framework下关于进度条的style定义,如下 <style name="Widget.ProgressBar"> <item name=&qu ...

  3. js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

    js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...

  4. caffe 在 windows 下的配置（scripts\build_win.cmd）

    官网配置文档见:GitHub - BVLC/caffe at windows 1. windows 设置 requirements: visual studio 2013/2015 CMake > ...

  5. 学习笔记：Vue——处理边界情况

    访问元素&组件 01.访问根实例 $root // Vue 根实例 new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ...

  6. web自动化测试 Selenium2 Java自动化测试实战9_3

    driver.findElement(By.id("idInput")).sendKeys("哈哈"); driver.findElement(By.id(&q ...

  7. Qt Creator 源码学习 03：qtcreator.pro

    当我们准备好 Qt Creator 的源代码之后,首先进入到它的目录,来看一下它的源代码目录有什么奥秘. 这里一共有 9 个文件夹和 9 个文件.我们来一一看看它们都是干什么用的. .git: 版本控 ...

  8. （转）xshell无法在vim中复制黏贴

    ssh xshell 连接在vim中无法用 ctrl+insert 复制黏贴 修改.vimrc set mouse=c vi的三种模式:命令模式,插入模式,可视模式.鼠标可以启动于各种模式中: The ...

  9. C#游戏开发高速入门 2.1 构建游戏场景

    C#游戏开发高速入门 2.1  构建游戏场景 假设已经计划好了要编写什么样的游戏,在打开Unity以后.要做的第一件事情就是构建游戏场景(Scene).游戏场景就是玩家游戏时,在游戏视图中看到的一切. ...

  10. linux cmd cp -a

    cp -a 在保留原文件属性的前提下复制文件    cp -r dirname destdir   复制目录后其文件属性会发生变化 想要使得复制之后的目录和原目录完全一样,可以使用cp -a dirn ...