抖音上面的照片墙实例(可拖拽)

6

最近呀,在抖音上面看到一种可以利用鼠标拖动旋转的照片墙,配上音乐,很打动人,今天呢,我就自己动手,尝试做了一个demo,马上呈上: 如果还是有不清楚的,可以联系我:点击QQ交流 H…

最近呀,在抖音上面看到一种可以利用鼠标拖动旋转的照片墙,配上音乐,很打动人,今天呢,我就自己动手,尝试做了一个demo,马上呈上:
如果还是有不清楚的,可以联系我:点击QQ交流

Html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE HTML>
<html>
    <head>
        <title>爱前端博客</title>
        <meta charset="utf-8">
        <meta name="Author" content="爱前端博客">
        <style type='text/css'>
            *{ margin:0; padding:0;}
            body{
                background:#000;
                overflow:hidden;
            }
            #perspective{
                perspective:800px;
            }
            #wrap{
                width:120px;  /*133:200  4:6  */
                height:180px;
                margin:0 auto;
                position:relative;

                /*搭建3D效果必须的两个属性:一个变换风格变3d,一个场景景深800px*/
                transform-style:preserve-3d;
                transform:rotateX(-10deg) rotateY(0deg);

            }
            #wrap img{
                width:100%;
                height:100%;
                position:absolute;
                border-radius:1px;
                box-shadow:0 0 8px #f9f;
                transform:rotateY(0deg) translateZ(0px);
                /*倒影:朝向 偏移 遮盖*//*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/
                -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
            }
            #wrap p{
                width:1200px;
                height:1200px;
                background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
                border-radius:100%;
                position:absolute;
                left:50%;
                top:102%;
                margin-left:-600px;
                margin-top:-600px;
                transform:rotateX(90deg);
            }
        </style>
    </head>
    <body>
        <div id="perspective">
            <div id='wrap'>
                <img src="img/1.jpg" />
                <img src="img/2.jpg" />
                <img src="img/3.jpg" />
                <img src="img/4.jpg" />
                <img src="img/5.jpg" />
                <img src="img/6.jpg" />
                <img src="img/7.jpg" />
                <img src="img/8.jpg" />
                <img src="img/9.jpg" />
                <img src="img/10.jpg" />
                <img src="img/11.jpg" />

                <p></p>
            </div>
        </div>
    </body>
</html>
这里的图片需要各位手动添加,之后就可以实现抖音的效果啦,如有疑问,请Q博主

Javascript部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script type="text/javascript">
            window.onload = function(){
                var oWrap = document.getElementById('wrap');
                var oImg = oWrap.getElementsByTagName('img');
                var oImgLength = oImg.length;
                var Deg = 360 / oImgLength;
                var nowX , nowY , lastX , lastY , minusX = 0, minusY = 0;
                var roY = 0 , roX = -10;
                var timer;

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

                }

                mTop();

                window.onresize = mTop;

                function mTop(){
                    var wH = document.documentElement.clientHeight;
                    oWrap.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 ………………………………顶部………………

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

                        //更新wrap的旋转角度,拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
                        roY += minusX*0.2; // roY = roY + minusX*0.2;
                        roX -= minusY*0.1;

                        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(){
                            minusX *= 0.95;
                            minusY *= 0.95;
                            roY += minusX*0.2; // roY = 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 );
                            }
                            console.log( minusX );
                        },13);
                    }
                    return false;
                }
            }

        </script>

【第一类照片墙】

照片墙效果请猛戳此处:点击

下载请请猛戳此处:下载

【第二类照片墙】

抖音上酷炫的女朋友照片墙js代码

抖音上酷炫的女朋友照片墙js代码:抖音上酷炫的女朋友照片墙js代码

作者: huanggr

为您推荐

7

发表评论

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