js实现3D旋转相册的操作

本文实例为大家分享了js实现3D旋转相册的具体代码,供大家参考,具体内容如下效果展示:(图片大小为133*200)代码展示:<!DO

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

效果展示:(图片大小为133*200)

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

代码展示:

<!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=”https://www.wpmee.com/img/1.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/2.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/3.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/4.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/5.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/6.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/7.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/8.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/9.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/10.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<img src=”https://www.wpmee.com/img/11.jpg” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

</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>

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

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/7054.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注