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 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
你准备好迎接vue3.0了吗
Apr 28 Javascript
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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
JavaScript 异步调用
2017/10/25 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
利用Python爬取可用的代理IP
2016/08/18 Python
Pycharm远程调试openstack的方法
2017/11/21 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
平面设计的岗位职责
2013/11/08 职场文书
青年志愿者活动总结
2014/04/26 职场文书
车贷收入证明范本
2014/09/14 职场文书