原生js如何实现图片翻转旋转效果？
原生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如何实现图片翻转旋转效果？的更多相关文章
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 原生JS实现异步图片上传（预览）
效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...
- 原生js - 两种图片懒加载实现原理
目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...
- 原生JS，实现图片可拖拽，并且移动四个角和四条变能够自由变换图片大小
网上搜的资料,源码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 原生Js页面滚动延迟加载图片
原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
随机推荐
- SpringCloud核心教程 | 第三篇：服务注册与发现 Eureka篇
Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...
- wmi 一些配置（参考）
http://www.bubuko.com/infodetail-1937463.html
- shell实例浅谈之三产生随机数七种方法
一.问题 Shell下有时须要使用随机数,在此总结产生随机数的方法.计算机产生的的仅仅是"伪随机数".不会产生绝对的随机数(是一种理想随机数).伪随机数在大量重现时也并不一定保持唯 ...
- shell-查看手机分辨率
使用如下命令,可以查看手机分辨率 adb shell dumpsys window displays 运行结果如下 Display: mDisplayId= init=1080x1920 480dpi ...
- Flume Interceptors官网剖析（博主推荐）
不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...
- $(dom).each(index,ele){} 真正的jquery对象
1.$(ele)才是each真正的jquery对象,而不是ele.$('.mt-story-info').each(function(index,ele){ if($('.mt-story-info' ...
- Mongodb总结6-数据库启动、停止、备份等命令
#启动Mongodb默认启动,需要在/data/db,Windows下对应的目录是Mongod.exe所在磁盘分区的根目录,例如Mongodb存放在D:/Mongodb,那么对应的路径就是D:/dat ...
- 洛谷——P1601 A+B Problem（高精）
https://www.luogu.org/problem/show?pid=1601#sub 题目背景 无 题目描述 高精度加法,x相当于a+b problem,[b][color=red]不用考虑 ...
- [RxJS] How To get the results of two HTTP requests made in sequence
switchMap can chain two HTTP requests together, creating one request based on the results of the fir ...
- Javascript和jquery事件--阻止事件冒泡和阻止默认事件
阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...