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 相关文章推荐
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
js有序数组的连接问题
Oct 01 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
JS立即执行的匿名函数用法分析
Nov 04 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
用jscript实现新建word文档
2007/06/15 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Python gevent协程切换实现详解
2020/09/14 Python
通过代码实例了解Python异常本质
2020/09/16 Python
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
销售会计工作职责
2013/12/02 职场文书
中英文求职信范文
2014/01/27 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
具结保证书范本
2015/05/11 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技