JavaScript制作3D旋转相册


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了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>

效果图:

JavaScript制作3D旋转相册

可用鼠标拖动。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
js实现缓动动画
Nov 25 Javascript
微信小程序工具函数封装
Oct 28 #Javascript
js实现3D照片墙效果
Oct 28 #Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 #Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 #Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 #Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 #Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 #Javascript
You might like
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python集合删除多种方法详解
2020/02/10 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
工作态度检讨书
2014/02/11 职场文书
房地产促销活动方案
2014/03/01 职场文书
毕业设计说明书
2014/05/07 职场文书
员工合理化建议书
2014/05/19 职场文书
条幅标语大全
2014/06/20 职场文书
献爱心标语
2014/06/21 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
法定代表人免职证明
2015/06/24 职场文书
团队拓展训练感想
2015/08/07 职场文书