动态相册

最新推荐文章于 2022-09-25 12:56:55 发布
前端路上迷茫的小鲨鱼
最新推荐文章于 2022-09-25 12:56:55 发布
阅读量1.8k
点赞数 2
分类专栏：动画效果
本文链接：https://blog.youkuaiyun.com/Guoyu1_/article/details/86061783
版权
动画效果专栏收录该内容
5 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0}
        body{
            background:#222;
            overflow:hidden;
            user-select:none;  /*禁止选中*/
        }
        .perspective{
            perspective:800px;  /*3d景深*/
        }
        .wrap{
            transform-style:preserve-3d;
            width:120px;
            height:180px;
            margin:100px auto;
            position:relative;
            transform:rotateX(0deg) rotateY(0deg);
        }
        .wrap img{
            display:block;
            position:absolute;
            width:100%;
            height:100%;
            transform: rotateY(0deg) translateZ(0px);
            padding:10px;
            background:transparent;
            box-shadow: 0 0 4px #fff; /*水平位移 垂直位移 扩散程度 颜色*/
            border-radius:5px;        /*圆角*/
        }
        .wrap p{
            width:1200px;
            height:1200px;
            background:-webkit-radial-gradient(center center ,600px 600px, rgba(122,122,122,0.5),rgba(0,0,0,0));
            position:absolute;
            border-radius:50%;
            left:50%;
            top:100%;
            margin-left:-600px;
            margin-top:-600px;
            transform:rotateX(90deg); /*沿着x轴方向摁倒*/
        }
    </style>
</head>
<body>
<div class='perspective'>
    <div class='wrap'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <img src="img/2.jpg" width='133' height='200' alt='#'>
        <p></p>
    </div>
</div>
<script>
    /*谁 触发了什么事件 谁做了什么*/
    window.onload=function(){  /*页面加载完成*/
        /*最新的原生获取元素方法querySelectorAll*/
        var oImg=document.querySelectorAll('img');
        var oWrap=document.querySelector('.wrap');
        var lastX,lastY,nowX,nowY,minusX,minusY,roY=0,roX=-10;
        var timer=null;
        /*计算每一个图片的角度 总角度(360) / 数量(11) = 单位角度*/
        var length=oImg.length;  /*获取img的数量 统称为长度*/
        var Deg=360/length;      /*单位角度*/
        for(var i=0;i<length;i++){
            oImg[i].style.transform='rotateY('+ i*Deg +'deg) translateZ(550px)';
            oImg[i].style.transition='transform 1s '+(length-1-i)*0.2+'s'
        }
        mTop();
        window.onresize=mTop;
        function mTop(){
            /*获取浏览器窗口可视高度*/
            var wH=document.documentElement.clientHeight||document.body.clientHeight;
            oWrap.style.marginTop=(wH/2)-oWrap.offsetHeight+'px';
        }

        /*拖拽drag 按下 onmousedown 移动 onmousemove 抬起 onmouseup */
        document.onmousedown=function(event){ /*按下鼠标开始准备拖拽*/
            event=event||window.event;          /*处理兼容性*/
            lastX=event.clientX;                /*鼠标拖拽开始时的x坐标*/
            lastY=event.clientY;                /*鼠标拖拽开始时的Y坐标*/
            clearInterval(timer);
            document.onmousemove=function(event){
                event=event||window.event;
                nowX=event.clientX;             /*鼠标移动时的x坐标*/
                nowY=event.clientY;             /*鼠标移动时的y坐标*/
                minusX=nowX-lastX;              /*获取鼠标移动距离*/
                minusY=nowY-lastY;              /*获取鼠标移动距离*/
                roY+=minusX*0.2;                /*通过移动量计算旋转角度*/
                roX-=minusY*0.1;                /*通过移动量计算旋转角度*/
                oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)'
                lastX=nowX;                     /*更新初始位置保证 lastX 跟得上鼠标*/
                lastY=nowY;                     /*更新初始位置保证 lastY  */
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                timer=setInterval(function(){
                    /*给一个摩擦系数,每一次定时器触发都慢一点点*/
                    minusX*=0.9;
                    minusY*=0.9;
                    roY+=minusX*0.2;                /*通过移动量计算旋转角度*/
                    roX-=minusY*0.1;                /*通过移动量计算旋转角度*/
                    oWrap.style.transform='rotateX('+roX+'deg) rotateY('+roY+'deg)';
                    if(Math.abs(minusX)<0.1&&Math.abs(minusY)<0.1){
                        /*当移动向量过小的时候终止定时器停止惯性*/
                        clearInterval(timer);
                    }
                },13);
            }
            return false;
        }

    }
</script>
</body>
</html>
效果图：