3D旋转相册2

最新推荐文章于 2024-05-17 04:12:55 发布

无人不xiao

最新推荐文章于 2024-05-17 04:12:55 发布

阅读量229

点赞数 3

本文链接：https://blog.csdn.net/weixin_45934659/article/details/106082722

版权

这是我写的第二种类型的3D旋转相册，它和上一个的效果是不一样的，上一个是自动的旋转，而这个是用鼠标来控制它。下边是代码（同样也是英jquery写的）：

<!DOCTYPE html>
<html lang="en" οndragstart="return false"> //加οndragstart="return false" 后鼠标什么东西都拖不动了
<head>
    <meta charset="UTF-8">
    <title>3D相册练习 2</title>

    <style>
     
        body{
            margin: 0;
            background-color: #000;
            overflow: hidden;    /*这是为了在最后拖动的时候不让他显示滚动条*/  
            
        }
        #perspeective{
            perspective: 1000px;  
            /* 景深 */
        }
        #wrap{
            position: relative;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin: 200px auto;
            transform-style:  preserve-3d;
            /* 设置3D场景*/
            transform: rotateX(-20deg) rotateY(0deg);
            /* 选择角度 */

        }
        #wrap img{
            position: absolute;
            height: 100%;
            width: 100%;
        }

    </style>
</head>

<body>
<div id="perspeective">
    <div id="wrap">
        <img src="images/01.jpg" alt="">
        <img src="images/02.jpg" alt="">
        <img src="images/03.jpg" alt="">
        <img src="images/04.jpg" alt="">
        <img src="images/05.jpg" alt="">
        <img src="images/06.jpg" alt="">
        <img src="images/07.jpg" alt="">
        <img src="images/08.jpg" alt="">
        <img src="images/09.jpg" alt="">
        <img src="images/10.jpg" alt="">
        <img src="images/11.jpg" alt="">
    </div>
</div>

<script src="jquery-1.11.3.js"></script>
<script>

    var oImg = document.getElementsByTagName("img");
    var lenth = oImg.length;
    var deg = 360/lenth;
    var oWrap = document.getElementById("wrap");
    //deg 就是旋转的时候求每张图片见的度数
    //onload函数是为了 页面内容加载完毕以后  在执行js代码
    window.onload = function(){
        // 因为document.getElementsByTagName("img") 他不是数组，我们要用call函数把它变成具有数组的性质
        Array.prototype.forEach.call(oImg,function(ele,index,self){
            ele.style.transform = "rotateY("+deg*index+"deg) translateZ(350px)" ;//deg*index  index 是图片数组的下标  ele 是代表某个元素，在这里也就是具体的某张图片
            ele.style.transition = "1s " +(lenth - index)*0.1 + "s";  //transition 是过度的意思， 这里一定要注意 +(lenth - index)*0.1 + "s" 是transition的第二个属性 这里这不过是写在了外边，但第一个属性后面一定要加空格，不然代码实现不了
        });
    }

    var newX,newY,lastX,lastY,minusY,minusX,rotX =-20,rotY = 0;
    //鼠标点击事件
    document.onmousedown = function(e){
       //第一次旧的值产生于第一次点击的时候
       lastY = e.clientY;
       lastX = e.clientX;
        //鼠标移动事件
        this.onmousemove = function(e){
            newX = e.clientX;
            newY = e.clientY;

            //求差值
            minusX = newX - lastX;
            minusY = newY - lastY;

            rotY -= minusX*0.2;
            rotX += minusY*0.1;  //差值累加形成一个新的旋转度数值

            oWrap.style.transform = "rotateX("+rotX+"deg)rotateY("+rotY+"deg)";

            //新的位置在用完以后就会变成旧的值
            lastX = newX;
            lastY = newY;

            
        }

        //鼠标松开事件
        this.onmouseup = function(e){
            this.onmousemove = null;  //清除鼠标的移动事件
        }
    }

</script>


</body>

</html>

下边是效果截图：
在这里插入图片描述

无人不xiao

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3D旋转相册2

这是我写的第二种类型的3D旋转相册，它和上一个的效果是不一样的，上一个是自动的旋转，而这个是用鼠标来控制它。下边是代码（同样也是英jquery写的）：<!DOCTYPE html><html lang="en" οndragstart="return false"> //加οndragstart="return false" 后鼠标什么东西都拖不动了<head> <meta charset="UTF-8"> <title>3D
复制链接

扫一扫