编程 Javascript

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>

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

js实现3D图片展示效果

- Author -

shangpudxd

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery的颜色选择插件实例代码

Oct 02 Javascript

js实现下拉框选择要显示图片的方法

Feb 16 Javascript

JS实现在线统计一个页面内鼠标点击次数的方法

Feb 28 Javascript

JS实现的网页倒计时数字时钟效果

Mar 02 Javascript

JS实现的最简Table选项卡效果

Oct 14 Javascript

详解JavaScript对象和数组

Dec 03 Javascript

扩展jquery easyui tree的搜索树节点方法(推荐)

Oct 28 Javascript

bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据

Aug 09 Javascript

vue.js语法及常用指令

Oct 29 Javascript

轻松学习JavaScript函数中的 Rest 参数

May 30 Javascript

Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解

Aug 07 Javascript

vue页面更新patch的实现示例

Mar 25 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