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 url传值中文乱码之解决之道
Nov 20 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
js实现ATM机存取款功能
Oct 27 Javascript
vue项目中引入Sass实例方法
Aug 27 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/10/09 PHP
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
举例讲解Python中is和id的用法
2015/04/03 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
20招让你的Python飞起来!
2016/09/27 Python
python实现机器人行走效果
2018/01/29 Python
Django开发中复选框用法示例
2018/03/20 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
UNIX文件系统分类
2014/11/11 面试题
写给爸爸的道歉信
2014/01/15 职场文书
生物学专业求职信
2014/07/23 职场文书
教师求职简历自我评价
2015/03/10 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS