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基础整理1
Dec 06 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
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的开发框架的现状和展望
2007/03/16 PHP
php zip文件解压类代码
2009/12/02 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PDO::inTransaction讲解
2019/01/28 PHP
js function定义函数使用心得
2010/04/15 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
python如何实现代码检查
2019/06/28 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
Python的历史与优缺点整理
2020/05/26 Python
python程序需要编译吗
2020/06/19 Python
python递归函数用法详解
2020/10/26 Python
英国航空官网:British Airways
2016/09/11 全球购物
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
2014年医生工作总结
2014/11/21 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
先进学校事迹材料
2014/12/30 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js