js实现3D图片展示效果


Posted in Javascript onMarch 09, 2017

点击左上角的按钮前后切换

效果图:

js实现3D图片展示效果

代码如下:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
<style>
*{margin:0; padding:0; list-style:none;}
ul{ 
 width:300px; 
 height:300px;
 margin:100px auto;
 position:relative;
 -webkit-transform-style:preserve-3d;
 perspective:800px;
}
ul li{
 position:absolute;
 top:0; left:0;
 width:100%;
 height:100%;
 text-align:center;
 line-height:300px;
 font-size:50px;
 background:#399;
 border:1px solid #000;
 opacity:0;
}
.l2{
 opacity:0;
 -webkit-transform: translate(-280px,0) rotateY(45deg);
 z-index:3;
}
.l1{
 opacity:1;
 -webkit-transform: translate(-220px,0) rotateY(45deg);
 z-index:4;
}
.cur{ 
 opacity:1;
 -webkit-transform:translateZ(50px);
 z-index:5;
}
.r1{
 opacity:1;
 -webkit-transform: translate(220px,0) rotateY(-45deg);
 z-index:4;
}
.r2{
 opacity:0;
 -webkit-transform: translate(280px,0) rotateY(-45deg);
 z-index:3;
}
</style>
<script>
window.onload = function(){
 var oPrev = document.querySelector('.prev_btn');
 var oNext = document.querySelector('.next_btn');
 var aLi = document.querySelectorAll('ul li');
 var aClass = [];
 for(var i=0;i<aLi.length;i++){
 aClass[i] = aLi[i].className;
 }
 var bOk = false;
 oPrev.onclick = function(){
 if(bOk)return;
 bOk = true;
 aClass.push(aClass.shift());
 change();
 };
 oNext.onclick = function(){
 if(bOk)return;
 bOk = true;
 aClass.unshift(aClass.pop());
 change();
 };
 function change(){
 for(var i=0;i<aLi.length;i++){
 aLi[i].style.WebkitTransition = '.5s all ease';

 aLi[i].className = aClass[i];
 }
 var oCur = document.querySelector('.cur');
 function tranEnd(){
 oCur.removeEventListener('transitionend',tranEnd,false);
 bOk = false;
 }
 oCur.addEventListener('transitionend',tranEnd,false);
 }
};
</script>
</head>
<body>
 <input type="button" value="prev" class="prev_btn" />
 <input type="button" value="next" class="next_btn" />
 <ul>
 <li class="l2">0</li>
 <li class="l1">1</li>
 <li class="cur">2</li>
 <li class="r1">3</li>
 <li class="r2">4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 <li>11</li>
 <li>12</li>
 <li>13</li>
 </ul>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
JavaScript实现左右下拉框动态增删示例
Mar 09 #Javascript
less简单入门(CSS 预处理语言)
Mar 08 #Javascript
完美实现js选项卡切换效果(二)
Mar 08 #Javascript
微信小程序中用WebStorm使用LESS
Mar 08 #Javascript
Vue常用指令V-model用法
Mar 08 #Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 #Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 #Javascript
You might like
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python运算符重载用法实例分析
2015/06/01 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python中如何获取类属性的列表
2016/12/26 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python定义类self用法实例解析
2020/01/22 Python
高级3D打印市场:Gambody
2019/12/26 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
就业自荐书
2013/12/05 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
取保候审保证书
2014/04/30 职场文书
社区先进事迹材料
2014/05/19 职场文书
销售员态度差检讨书
2014/10/26 职场文书
公司股东出资证明书
2014/11/01 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python