脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现3D图片展示效果

js实现3D图片展示效果

 更新时间：2017年03月09日 08:32:38   作者：shangpudxd  
本文主要介绍了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 Dialog 去掉右上角的X关闭功能

    js Dialog 去掉右上角的X关闭功能

    用到 dialog弹出框时，不想要右上角的X 关闭功能，只是做个提示信息显示，下面是具体的去掉方法，大家可以参考下
    2014-04-04
  • JavaScript技巧44招【实用】

    JavaScript技巧44招【实用】

    JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等。本文主要介绍JavaScript应用的一些小技巧。
    2016-12-12
  • JS如何生成动态列表

    JS如何生成动态列表

    这篇文章主要为大家详细介绍了JS如何生成动态列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）

    js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）

    把所有代码拷下另存为一个html文件，在浏览器中打开，点击“新增一行”按钮就可以,以下是对js函数的解释
    2009-03-03
  • Javascript下拉刷新的简单实现

    Javascript下拉刷新的简单实现

    这篇文章主要为大家详细介绍了Javascript下拉刷新的简单实现过程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 深入理解Webpack 中路径的配置

    深入理解Webpack 中路径的配置

    这篇文章主要给大家介绍了关于Webpack2中路径配置的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • js中“??“和“?.“用法小结

    js中“??“和“?.“用法小结

    这篇文章主要介绍了js中“??“和“?.“用法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • javascript事件冒泡简单示例

    javascript事件冒泡简单示例

    这篇文章主要介绍了javascript事件冒泡原因、显示效果及阻止冒泡的方法,需要的朋友可以参考下
    2016-06-06
  • 微信小程序语音同步智能识别的实现案例代码解析

    微信小程序语音同步智能识别的实现案例代码解析

    在一些小程序的开发场景中经常会有语音转文字的需求，今天小编通过实际案例给大家分享微信小程序语音同步智能识别功能，需要的朋友可以参考下
    2020-05-05
  • DOM 事件的深入浅出（二）

    DOM 事件的深入浅出（二）

    本文主要讲解了DOM事件中Event对象的常用属性和方法，同时也介绍了其在IE中的兼容性问题及解决方案。希望对大家有所帮助
    2016-12-12

最新评论