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 相关文章推荐
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
php正则
2006/07/07 PHP
也谈截取首页新闻 - 范例
2006/10/09 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
JSON格式化输出
2014/11/10 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
vue实现树状表格效果
2020/12/29 Vue.js
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
餐饮管理自我介绍信
2014/01/15 职场文书
离婚协议书怎么写
2014/09/12 职场文书
2014年环保局工作总结
2014/12/11 职场文书