js实现3D旋转相册


Posted in Javascript onAugust 02, 2020

本文实例为大家分享了js实现3D旋转相册的具体代码,供大家参考,具体内容如下

效果展示:

js实现3D旋转相册

使用图片:

js实现3D旋转相册js实现3D旋转相册

剩余自己随意 图片大小为133*200

代码展示:

<!DOCTYPE html>
<!--设置图片的拖拽事件 不可用-->
<html lang="en" ondragstart="return false">
<head>
 <meta charset="UTF-8">
 <title>3D效果</title>
 <style>
  * {
   background-color: #000;
 
  }
 
  .container {
   border: 1px solid yellow;
   perspective: 800px;
   overflow: hidden;
  }
 
  .box {
   position: relative;
   border: 1px solid #f00;
   width: 133px;
   height: 200px;
   margin: 300px auto;
   transform-style: preserve-3d;
   transform:rotateX(-20deg) rotateY(0deg);
  }
 
  img {
   position: absolute;
   /*设置图片倒影效果*/
   -webkit-box-reflect:below 5px -webkit-gradient(linear,left top, left bottom,from( transparent),color-stop(40%,transparent),to(rgba(250,250,250,0.4)));
  }
 
 </style>
</head>
<body>
<div class="container">
 <div class="box">
  <img src="img/1.jpg" alt="">
  <img src="img/2.jpg" alt="">
  <img src="img/3.jpg" alt="">
  <img src="img/4.jpg" alt="">
  <img src="img/5.jpg" alt="">
  <img src="img/6.jpg" alt="">
  <img src="img/7.jpg" alt="">
  <img src="img/8.jpg" alt="">
  <img src="img/9.jpg" alt="">
  <img src="img/10.jpg" alt="">
  <img src="img/11.jpg" alt="">
 </div>
</div>
 
<script>
 // a 获取所有 img 元素
  var mimg = document.querySelectorAll("img");
  var mlength = mimg.length;
 // 动态获取 图片的旋转角度
 var mdeg = 360/mlength;
 
 //获取box 容器
 var mbox = document.querySelector(".box");
 
 
 /*页面加载后执行。。效果*/
  window.onload= function () {
   // 1 图片旋转动画
   for(var i = 0;i<mlength;i++){
    // console.log(mimg);
    //每张图片 1 60 2 120 3 180 4 240  60为图片的平分角
    mimg[i].style.transform = "rotateY("+(mdeg*i)+"deg) translateZ(350px)";
   // 添加过渡效果  动画执行多长时间 多久后开始执行动画 此时的效果 从最后一张开始动画
   //  console.log(mlength-i);
    mimg[i].style.transition = "1s "+(mlength-i)*0.1+"s"; //  0.1 动画调节
    //从第一张开始动画
    // mimg[i].style.transition = "1s "+i+"s";
   }
 
 
  // 获取鼠标点的位置 获取 差值 改变 转换的rotate: x y
   var newX,newY,lastX,lastY,cvalueX,cvalueY, rotX=-20,rotY=0;
  // 鼠标滑动后改变效果 (使用鼠标 按下 替换点击事件)
   document.onmousedown = function (e) {
   // 鼠标点击
   //  console.log("点击");
    lastX = e.clientX;
    lastY = e.clientY;
   // 鼠标移动
    this.onmousemove = function (e) {
     // console.log("移动");
    newX = e.clientX;
    newY = e.clientY;
     console.log(newX +" "+newY);
 
     //获取移动的差值
     cvalueX = newX-lastX;
     cvalueY = newY-lastY;
 
     //获取旋转的角度
     rotX -= cvalueY; /*因为要向前运动所以是负值*/
     rotY += cvalueX;
 
    // 将角度添加上 img容器
     mbox.style.transform = "rotateX("+rotX*0.1+"deg) rotateY("+rotY*0.1+"deg)"
    // 差值太大(转动太快) 调节每次的差值是和上一次差 而不是之前差(初始值的差)
     lastX = newX;
     lastY = newY;
 
    }
   // 鼠标抬起
    this.onmouseup = function () {
     // console.log("抬起");
    // 要停止移动的方法
     this.onmousemove = null;
    }
 
   }
  }
 
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
简单实现js拖拽效果
Jul 25 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
js实现双色球效果
Aug 02 #Javascript
js实现tab栏切换效果
Aug 02 #Javascript
原生js canvas实现鼠标跟随效果
Aug 02 #Javascript
原生js+canvas实现下雪效果
Aug 02 #Javascript
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
JavaScript实现动态生成表格
Aug 02 #Javascript
You might like
批量修改RAR文件注释的php代码
2010/11/20 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
用ADODB.Stream转换
2007/01/22 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python随机取list中的元素方法
2018/04/08 Python
numpy.where() 用法详解
2019/05/27 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
Django实现内容缓存实例方法
2020/06/30 Python
pymysql模块使用简介与示例
2020/11/17 Python
python中append函数用法讲解
2020/12/11 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
机械专业应届生求职信
2013/12/12 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
赞美教师的句子
2019/09/02 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript