原生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)首先是页面的结构部分对于我这种左右切换 ...
随机推荐
- HUSTOJ 1072 小数背包问题
HUSTOJ 1072 小数背包问题 题目描述 有一个背包,背包容量是M(0<M≤500),有N(1<N≤1000)个物品,物品可以分割成任意大小. 要求尽可能让装入背包中的物品总价值最大 ...
- 【hdu 4333】Revolving Digits
[链接]http://acm.hdu.edu.cn/showproblem.php?pid=4333 [题意] 就是给你一个数字,然后把最后一个数字放到最前面去,经过几次变换后又回到原数字,问在这些数 ...
- Activity启动模式的深入分析
网上关于Activity启动模式的文章许多.可是看起来都千篇一律,看完之后我们都能理解这4种启动模式.只是官方api对singleTask这个启动模式解释有些争议,导致我事实上并没有真正理解这几种模式 ...
- 学习笔记（二）：javascript之dom操作
一.document.getElementById() 根据Id获取元素节点 <div id="div1"> <p id="p1"> ...
- ajax缓存 header头文件
浏览器第一次访问服务器的时候,需要从服务器加载很多静态资源,并将这些资源文件缓存在浏览器中,当再次访问页面的时候,如果有相同资源文件就直接到缓存中去加载,这样就会降低服务器的负载和带宽,加快用户访问, ...
- 使用Tomcat发布war包
第一步:下载tomacat 1.下载地址:http://tomcat.apache.org 2.解压后目录如下 3.双击bin文件夹下startup.bat 即可启动tomcat, 计算机会弹出控制台 ...
- Altium Designer如何创建类,如何修改线宽
如果线宽还是没有改变,就是因为,有一个默认的class,它的规则优先级要高于PWR
- Loadrunner--web_find和web_reg_find的用法和区别
一.web_find()函数 该函数的作用是“在页面中查找相应的内容”,常用参数及含义如下: web_find("web_find", //定义该查找函数的名称 "Rig ...
- [求助]linux同一目录可否挂载多个数据盘？
https://bbs.aliyun.com/read/281222.html?pos=20
- Linux 内核源代码分析 chap 2 存储管理 （5）
物理页面分配 linux 内核 2.4 中有 2 个版本号的物理页面分配函数 alloc_pages(). 一个在 mm/numa.c 中, 还有一个在 mm/page_alloc.c 中, 依据条件 ...