脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 3D旋转相册

JavaScript制作3D旋转相册

 更新时间：2020年08月02日 10:06:59   作者：中二程序猿  
这篇文章主要为大家详细介绍了JavaScript制作3D旋转相册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js 3D旋转相册展示的具体代码，供大家参考，具体内容如下

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{padding:0;margin:0; font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif !important;}
 html body{overflow: hidden;}
 body{background:#ccc;}
 .box{width:140px; height:200px; -webkit-transform-style:preserve-3d; -webkit-transform: perspective(800px) rotateY(0deg) rotateX(0deg); position:relative; margin:400px auto;}
 .box span{width:140px; height:200px; position: absolute; background:deepskyblue; font-size:20px;
 text-align: center; line-height:200px; color:white;}
 </style>
 <script>
 function r2n(n){
 return n*Math.PI/180
 }
 window.onload=function(){
 var oBox=document.getElementsByClassName('box')[0];
 var aS=document.getElementsByTagName('span');
 for(var i=0;i<aS.length;i++){
 aS[i].style.WebkitTransition='1s all ease '+(aS.length-i)*.1+'s';
 aS[i].style.WebkitTransform='rotateY('+i*360/aS.length+'deg)'+' translateZ(500px) '
 }
 var pos=[];
 var x=0;
 var y=0;
 var timer=null;
 var timer2=null;
 document.onmousedown=function(ev){
 timer=setInterval(function(){
  pos[0]=pos[2];
  pos[1]=pos[3];
  pos[2]=x;
  pos[3]=y;
 },30);
 var disx=ev.pageX-x;
 var disy=ev.pageY-y;
 document.onmousemove=function(ev){
  x=ev.pageX-disx;
  y=ev.pageY-disy;
  oBox.style.WebkitTransform=' perspective(800px)'+' rotateY('+x/3+'deg)'+'rotateX('+-y/3+'deg)';
 };
 document.onmouseup=function(){
  clearInterval(timer);
  var speedx=pos[2]-pos[0];
  var speedy=pos[3]-pos[1];
  timer2=setInterval(function(){
  x+=speedx;
  y+=speedy;
  oBox.style.WebkitTransform=' perspective(800px)'+' rotateY('+x/3+'deg)'+'rotateX('+-y/3+'deg)';
  speedx*=0.94;
  speedy*=0.94;
  if(Math.abs(speedx)<1)speedx=0;
  if(Math.abs(speedy)<1)speedy=0;
  if(speedx==0&&speedy==0){
  clearInterval(timer2)
  }
  },30);
  document.onmousemove=null;
  document.onmouseup=null;
 }
 };
 return false
 }
 </script>
</head>
<body>
<div class="box">
 <span>1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 <span>5</span>
 <span>6</span>
 <span>7</span>
 <span>8</span>
 <span>9</span>
 <span>10</span>
 <span>11</span>
 <span>12</span>
</div>
</body>
</html>

效果图：

可用鼠标拖动。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 200行HTML+JavaScript实现年会抽奖程序

    200行HTML+JavaScript实现年会抽奖程序

    这篇文章主要为大家详细介绍了HTML+JavaScript实现年会抽奖程序的200行代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-01-01
  • 利用js实现可进行时间和工作调度的任务管理器

    利用js实现可进行时间和工作调度的任务管理器

    这篇文章主要为大家详细介绍了如何利用js实现一个可进行时间和工作调度的任务管理器,文中的示例代码简洁易懂,有需要的小伙伴可以参考一下
    2023-10-10
  • Javascript拖拽&拖放系列文章3之细说事件对象

    Javascript拖拽&拖放系列文章3之细说事件对象

    Javascript中的事件对象其实和.NET中继承自EventArgs类的派生类类似，用来给事件处理程序传递状态信息，从而进行相应的操作。这一篇文章将讲述Javascript事件对象中和实现拖拽功能相关的几个属性，并在最后将IE事件模型和标准DOM事件模型的差异封装到一个类中，从而适应所有的浏览器。
    2008-09-09
  • uni-app做微信小程序的分包处理方法

    uni-app做微信小程序的分包处理方法

    分包指的是把一个完整的小程序项目，按照不同的需求划分为不同的子包，在构建时打包成不同的分包，用户在浏览时按需加载，这篇文章主要介绍了uni-app做微信小程序的分包处理,需要的朋友可以参考下
    2023-02-02
  • javascript实现禁止右键和F12查看源代码

    javascript实现禁止右键和F12查看源代码

    这篇文章主要介绍了javascript实现禁止右键和F12查看源代码的代码,需要的朋友可以参考下
    2014-12-12
  • 使用ThinkJs搭建微信中控服务的实现方法

    使用ThinkJs搭建微信中控服务的实现方法

    这篇文章主要介绍了使用ThinkJs搭建微信中控服务的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 跨浏览器的设置innerHTML方法

    跨浏览器的设置innerHTML方法

    跨浏览器的设置innerHTML方法...
    2006-09-09
  • bootstrap——bootstrapTable实现隐藏列的示例

    bootstrap——bootstrapTable实现隐藏列的示例

    本篇文章主要介绍了bootstrapTable实现隐藏列的示例，具有一定的参考价值，有兴趣的可以了解一下。
    2017-01-01
  • javascript获取系统当前时间的方法

    javascript获取系统当前时间的方法

    这篇文章主要介绍了javascript获取系统当前时间的方法，格式为：2015年11月19日 星期四09:21:05，需要的朋友可以参考下
    2015-11-11
  • 可以将word转成html的js代码

    可以将word转成html的js代码

    这段很短的代码，可以将word转出html格式的代码，当然word自己也带的，另存为里面就有的，喜欢的朋友可以试试。
    2010-04-04

最新评论