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常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 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
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python getopt 参数处理小示例
2009/06/09 Python
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
python 定时修改数据库的示例代码
2018/04/08 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python 字符串换行的多种方式
2018/09/06 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
pow在python中的含义及用法
2019/07/11 Python
python Xpath语法的使用
2020/11/26 Python
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
人力资源部经理岗位职责规定
2014/02/23 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL