3D照片旋转

最新推荐文章于 2021-04-28 10:56:33 发布

默默_plus

最新推荐文章于 2021-04-28 10:56:33 发布

阅读量387

点赞数 2

分类专栏： jquery

本文链接：https://blog.csdn.net/qq2622482966/article/details/92093236

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于jquery 开发3D照片旋转程序

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D照片旋转</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
body {
	background:#000;
	perspective:2000px;
}
#box {
	width:220px;
	height:300px;
	margin:200px auto;
	position:relative;
	transform-style:preserve-3d;
}
#box img {
	width:100%;
	height:100%;
	position:absolute;
	-webkit-box-reflect:below 10px;
}
</style>
</head>
<body>
<div id="box">
    <img src="http://www.jq22.com/img/cs/300x500-1.png">
    <img src="http://www.jq22.com/img/cs/300x500-2.png">
    <img src="http://www.jq22.com/img/cs/300x500-3.png">
    <img src="http://www.jq22.com/img/cs/300x500-4.png">
    <img src="http://www.jq22.com/img/cs/300x500-5.png">
    <img src="http://www.jq22.com/img/cs/300x500-6.png">
    <img src="http://www.jq22.com/img/cs/300x500-7.png">
    <img src="http://www.jq22.com/img/cs/300x500-8.png">
    <img src="http://www.jq22.com/img/cs/300x500-9.png">
    <img src="http://www.jq22.com/img/cs/300x500-1.png">
</div>

<script>
 window.onload = function() {
     var oWrap = document.getElementById('box');
     var oImg = box.getElementsByTagName('img');
     var oImgLength = oImg.length;
     var Deg = 360 / oImgLength;
     var nowX, nowY, lastX, lastY, disx = 0,
         disy = 0;
     var roY = 0,
         roX = 0;
     var timer;

     for (var i = 0; i < oImgLength; i++) {
         oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(400px)';
         oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';

     }

     mTop();

     window.onresize = mTop;

     function mTop() {
         var wH = document.documentElement.clientHeight;
         box.style.marginTop = wH / 2 - 180 + 'px';
     }

     // 拖拽：三个事件-按下 移动 抬起
     //按下
     document.onmousedown = function(ev) {
         ev = ev || window.event;

         //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
         lastX = ev.clientX;
         lastY = ev.clientY;

         //移动
         this.onmousemove = function(ev) {
             ev = ev || window.event;

             //                      clearInterval( timer );

             nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
             nowY = ev.clientY; // clientY ………………………………顶部………………

             //当前坐标和前一点坐标差值
             disx = nowX - lastX;
             disy = nowY - lastY;

             //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
             roY += disx * 0.2; // roY = roY + disx*0.2;
             roX -= disy * 0.2;

             oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';


             //                      //生成div，让div跟着鼠标动
             //                      var oDiv = document.createElement('div');
             //                      oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
             //                      this.body.appendChild(oDiv);


             //前一点的坐标
             lastX = nowX;
             lastY = nowY;
         }
         //抬起
         this.onmouseup = function() {
             this.onmousemove = null;
             timer = setInterval(function() {
                 disx *= 0.98;
                 disy *= 0.98;
                 roY += disx * 0.2; // roY = roY + disx*0.2;
                 roX -= disy * 0.2;
                 oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
             }, 20);
         }
         return false;
     }
 }
</script>

</body>
</html>

默默_plus

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
3D照片旋转

基于jquery 开发3D照片旋转程序<!doctype html><html><head><meta charset="utf-8"><title>3D照片旋转</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"&g...
复制链接

扫一扫

专栏目录