原生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)首先是页面的结构部分对于我这种左右切换 ...
随机推荐
- django 简单会议室预约（4）
基本的配置已经完成了,来看看最重要的views.py 先看看简单的注册登录功能,在django里有一个专门的模块用来验证用户信息 :所以只需要调用就好了: #-*-coding:utf-8 -*- f ...
- php数组函数（分类基本数组函数，栈函数，队列）
php数组函数(分类基本数组函数,栈函数,队列函数) 一.总结 1.常用数组函数 函数 描述 array() 创建数组. array_combine() 通过合并两个数组来创建一个新数组. array ...
- WEB前端--深入进去
在网站开发这条道路上做专做精,一个专题一个专题的深入探索,一个盲区一个盲区的理解和记忆,终有大成的那一天的.
- Android 迭代器 Iteraor迭代器以及foreach的使用
Iterator是一个迭代器接口,专门用来迭代各种Collection集合,包括Set集合和List集合. Java要求各种集合都提供一个iteratot()方法,该方法返回一个Iterator用于遍 ...
- Loadrunner--web_find和web_reg_find的用法和区别
一.web_find()函数 该函数的作用是“在页面中查找相应的内容”,常用参数及含义如下: web_find("web_find", //定义该查找函数的名称 "Rig ...
- chmod用数字来表示权限的方法
前提: mode权限设定字串.格式:[ugoa...][[+-=][rwxX]...][,...] 当中u表示拥有者(user).g表示与拥有者属于同一个群体(group),o表示其它以外的人(ot ...
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human reada ...
- cURL（wget）—— 测试 RESTful 接口及模拟 GET/POST/PUT/DELETE/OPTIONS 请求
cURL 是一个简单的 http 命令行工具.与最优秀的 Unix 工具一样,在设计之时,cURL 是个小型程序,功能十分专一,而且是故意为之,仅用于访问 http 服务器.(在 Linux 中,可以 ...
- 关于Altium Designer重新修改某一原件pcb封装的问题
在重新导入的时候可能会影响到类class,所以可能是原理图中没有类吧 上图中的comment的修改是表示下面图片中的 comment栏的改变:
- linux的关机
shutdown -h now 立即关机 shutdown -r now 立即重启