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 相关文章推荐
20个最新的jQuery插件
Jan 13 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
对比分析json及XML
Nov 28 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
C#实现将一个字符转换为整数
Dec 12 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
js Proxy的原理详解
May 25 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 - Html Transfer Code
2006/10/09 PHP
phpmyadmin的#1251问题
2006/11/25 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
详解Python的单元测试
2015/04/28 Python
浅谈五大Python Web框架
2017/03/20 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
会议邀请函范文
2014/01/09 职场文书
安全生产汇报材料
2014/02/17 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
小学教师读书活动总结
2014/07/08 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
Python图片处理之图片裁剪教程
2021/05/27 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL