js实现3D旋转相册

 更新时间:2020-08-02 16:09:01   作者:佚名   我要评论(0)

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

使用图片:

剩余自己随意 图片大小为133*200
代码展示:


<!DOCTYPE ht

本文实例为大家分享了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制作3D旋转相册
  • javascript椭圆旋转相册实现代码

相关文章

  • js实现3D旋转相册

    js实现3D旋转相册

    本文实例为大家分享了js实现3D旋转相册的具体代码,供大家参考,具体内容如下 效果展示: 使用图片: 剩余自己随意 图片大小为133*200 代码展示: <!DOCTYPE ht
    2020-08-02
  • jQuery实现雪花飘落效果

    jQuery实现雪花飘落效果

    本文实例为大家分享了jQuery实现雪花飘落效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="ut
    2020-08-02
  • js+canvas实现五子棋小游戏

    js+canvas实现五子棋小游戏

    本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!DOCTYPE html> <html lang="en"> <head> <meta
    2020-08-02
  • js实现点击上传图片并设为模糊背景

    js实现点击上传图片并设为模糊背景

    本文实例为大家分享了js实现点击上传图片,同时设该图片为模糊背景,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta c
    2020-08-02
  • django下创建多个app并设置urls方法

    django下创建多个app并设置urls方法

    1、创建第二个app 假设我们项目P下面已经有了一个默认的app,名字是app1。现在我想创建第二个app,名字时app2。 进入pychram下的Terminal中,运行命令: pytho
    2020-08-02
  • 基于opencv实现简单画板功能

    基于opencv实现简单画板功能

    OpenCV提供了很多简单的语句,实现复杂的功能,根据颜色和鼠标交互的基础语句,我们可以建立一个简单的画板。尽管它简单,但是制作的框架步骤不能少。 如果您感兴趣
    2020-08-02
  • 原生js+canvas实现贪吃蛇效果

    原生js+canvas实现贪吃蛇效果

    本文实例为大家分享了canvas实现贪吃蛇效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: 页面布局展示:worm.html <!DOCTYPE html> <html> <he
    2020-08-02
  • flask开启多线程的具体方法

    flask开启多线程的具体方法

    在我之前解释了flask如何支持多线程主要通过两个类来实现,LocalStack和Local,在Local中有两个属性,__storage__和__ident_func__,后者用来获取线程id,从而区分不同线
    2020-08-02
  • Python改变对象的字符串显示的方法

    Python改变对象的字符串显示的方法

    问题 你想改变对象实例的打印或显示输出,让它们更具可读性。 解决方案 要改变一个实例的字符串表示,可重新定义它的 __str__() 和 __repr__() 方法。例如: c
    2020-08-02
  • Android入门计算器编写代码

    Android入门计算器编写代码

    这个简易计算器是我按照一本android开发入门书学的,书上的第一个例子就是计算器的编写。计算器的编写主要涉及到按键的布局和按键输入要点。 一个总的Lnearlayout的
    2020-08-02

最新评论