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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
Html5生成验证码的示例代码
May 10 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修改NetBeans默认字体的大小
2013/07/02 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
php函数连续调用实例分析
2015/07/30 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
python基于win32api实现键盘输入
2020/12/09 Python
食品安全标语
2014/06/07 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
校长新学期致辞
2015/07/30 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书