国瑞个人博客
首页 > Javascript > 抖音上面的照片墙实例(可拖拽)

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

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

 2018年08月20日 作者: 国瑞个人博客 1587次浏览

最近呀,在抖音上面看到一种可以利用鼠标拖动旋转的照片墙,配上音乐,很打动人,今天呢,我就自己动手,尝试做了一个demo,马上呈上:

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>

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

下载请请猛戳此处:下载

百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《抖音上面的照片墙实例(可拖拽)》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/464.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 29 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
29

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 216 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 803 天
  • 注册用户: 659 人
  • 访问总量: 8780720 次
  • 最近更新: 2019年7月15日
-->