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 firefox兼容ie的dom方法脚本
May 18 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
js实现select下拉框菜单
Dec 08 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 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操作符与控制结构代码
2011/12/30 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
详解Angular操作cookies方法
2018/06/01 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
个人自我鉴定
2013/11/07 职场文书
清洁工表扬信
2014/01/08 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
优秀党员先进材料
2014/12/18 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
2016年感恩节寄语
2015/12/07 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL