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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
vue实现下载文件流完整前后端代码
Nov 17 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实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
Script的加载方法小结
2011/01/12 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python global全局变量函数详解
2018/09/18 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
python requests post多层字典的方法
2018/12/27 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
python try...finally...的实现方法
2020/11/25 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
JS原生实现轮播图的几种方法
2021/03/23 Javascript
后勤服务中心总经理工作职责
2014/03/03 职场文书
会计岗位说明书
2014/07/29 职场文书
花田少年史观后感
2015/06/16 职场文书
2015年女工委工作总结
2015/07/27 职场文书
python前后端自定义分页器
2022/04/13 Python