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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
js格式化时间的简单实例
Nov 27 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
vue.js路由跳转详解
Aug 28 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
angular多语言配置详解
2019/05/16 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python批量获取html内body内容的实例
2019/01/02 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
自我评价的正确写法
2013/09/19 职场文书
环保建议书
2014/03/12 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书