原生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)首先是页面的结构部分对于我这种左右切换 ...
随机推荐
-
从C#到Objective-C，循序渐进学习苹果开发(1)--准备开发账号和开发环境
本随笔系列主要介绍从一个Windows平台从事C#开发到Mac平台苹果开发的一系列感想和体验历程,本系列文章是在起步阶段逐步积累的,希望带给大家更好,更真实的转换历程体验,因为一旦方方面面都精通了,也 ...
-
【HDOJ】3029 Scales
CF上有道类似的,做了那个这个简单多了.思路是取模.模等于1如何处理,模等于2如何分类分类讨论后.可解.解得对数据排序后再输出. /* 3029 */ #include <iostream> ...
-
利用T4模版生成EF实体
直接上代码,只需要修改EF实体的地址就可以了. <#@ template language="C#" debug="false" hostspecific ...
-
UNIX环境高级编程——pthread_create的问题
linux 下常用的创建多线程函数pthread_create(pthread_t * thread , pthread_attr_t * attr , void *(*start_routine)( ...
-
POI操作excle
将根目录下的poi-3.6-20091214.jar和Lib目录下三个通用包 commons-logging-1.1.jar junit-3.8.1.jar log4j-1.2.13.jar拷贝到项目 ...
-
全新OCR3500数据
改装: 手变6700,夹器彦豪R741,牙盘5700,前拨5700,后拨5701,飞轮5700,链条YBN S10 S2,弯把DEDA RHM01,前叉山寨BIANCHI K-VID,轮组FULCRU ...
-
Alpha冲刺第6天
Alpha第六天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...
-
【Spark】Spark-性能调优-系列文章
Spark-性能调优-系列文章 Spark Master at spark://node-01:7077 scala java8_百度搜索 (1 封私信)如何评价Linkedin决定逐渐减少Scala ...
-
使用 Java DB (Derby) 数据库
使用 Java DB (Derby) 数据库 https://netbeans.org/kb/docs/ide/java-db_zh_CN.html 本文档说明了如何在 NetBeans IDE 中设 ...
-
NOIP模拟赛11
T1 [HAOI2016]放棋子 https://daniu.luogu.org/problem/show?pid=3182 障碍交换行不影响 所以第i列有障碍的行换到第i行 然后错排公式 本校自测要 ...