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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
javascript 常见功能汇总
Jun 11 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 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+xml实现在线英文词典查询的方法
2015/01/23 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jquery 使用简明教程
2014/03/05 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
详解Python爬虫的基本写法
2016/01/08 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Python使用configparser库读取配置文件
2020/02/22 Python
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
应聘美工求职信
2013/11/07 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
写给老师的表扬信
2014/01/21 职场文书
长城的导游词
2015/01/30 职场文书
安全第一课观后感
2015/06/18 职场文书