黑马程序员技术交流社区

标题: 【上海校区前端学科- hwd】360度全方位玩转iPhone X [打印本页]
作者: sh_hwd    时间: 2017-11-9 18:34
标题: 【上海校区前端学科- hwd】360度全方位玩转iPhone X
本帖最后由 sh_hwd 于 2017-11-13 15:42 编辑



        小伙伴们，应该都对新发布的IPhone X好奇吧，但是昂贵的价格，让我们很多人望而却步。所以，我们应该自己动手做出一个iPhoneX，并且能够全方位的观察。
如上图，就是一个鼠标拖拽手机能全方位观察的立体效果图。我们只需一些css3新的属性，加上少量的js就可以实现。       那么，接下。我带领大家实现这效果。首先，我们需要分析整体的思路。
第一步：搭建好整体的html结构。（我们需要一个主体的盒子div.content涵盖手机所有结构）
         
第二步：写出结构样式。
       这一步很重要。样式也稍微有点小复杂。但是我们一步步分析，问题就没有啦。在一个整体的div.content下，开启视距perspective: 1000px; 然后在div.box设置transform-style:preserve-3d; 开启3D模式。
        如果，有些小伙伴不知道这么些css3属性什么意思，没关系。我在网盘链接中，有详细的笔记介绍。在div.box里面包含所有具体的上下左右前后四周等结构。根据需求各自设置样式。例如旋转的角度，或者移动的距离这些是难点所在，来形成立体的手机立体感的图形。

                           


第三步：js的拖拽效果实现
     这里代码很少，但是思路非常明确，先在外界设置一个节流阀默认为flag=false，其次，是由三个事件。鼠标按下，鼠标抬起，鼠标移动。鼠标按下时，记录保存刚开始的鼠标所在的x，y的位置，并且开启了flag=true。
      在开始节流阀的情况下，鼠标按下时，记录保存刚开始的鼠标所在的x，y的位置，并且开启了flag=true。在开始节流阀的情况下，进入鼠标移动事件，计算出现在鼠标所在的位置，然后给div.box 设置上css3属性。
这样就可以360度 拖动iphoneX啦。当鼠标抬起时候，关闭节流阀，这样移动事件就不会触发。

            
以下就是源码：
[AppleScript] 纯文本查看 复制代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>iphoneX</title>

    <style>

    * {

        margin: 0;

        padding: 0;

    }

    

    body {

        height: 645px;

        background: radial-gradient(circle, white, #b2b2b2, #919191);

        /*兼容各浏览器的 */

        background: -webkit-radial-gradient(circle, white, #b2b2b2, #919191);

        /* Safari 5.1 - 6.0 */

        background: -o-radial-gradient(circle, white, #b2b2b2, #919191);

        /* Opera 11.6 - 12.0 */

        background: -moz-radial-gradient(circle, white, #b2b2b2, #919191);

        /* Firefox 3.6 - 15 */

        cursor: pointer;

    }

    

    .content {

        position: relative;

        top: 125px;

        perspective: 1000px;

        /* 视距 */

    }

  

    .box {

        width: 165px;

        height: 331px;

        position: relative;

        /*background: pink;*/

        margin: 0 auto;

        transform-style: preserve-3d;

        /* 默认 2D */

    }

    

    .box > div {

        position: absolute;

        transition: transform 0.4s;

        /*transform动画效果*/

        transition: transform 1s;

        /*transform动画效果*/

        /*不让鼠标选中文字*/

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

    }

    

    .font {

        width: 165px;

        height: 331px;

        background: url(imgs/font.png);

        transform: translateZ(5px);

    }

    

    .back {

        width: 165px;

        height: 331px;

        background: url(imgs/back.png);

        transform: translateZ(-5px) rotateY(180deg);

    }

    

    .left {

        width: 10px;

        height: 290px;

        background: black;

        border-radius: 1px;

        transform: rotateY(90deg) translateZ(-3px) translateY(18px);

    }

    

    .right {

        width: 10px;

        height: 290px;

        background: black;

        border-radius: 1px;

        transform: rotateY(-90deg) translateZ(-158px) translateY(18px);

    }

    

    .top {

        width: 10px;

        height: 130px;

        background: black;

        border-radius: 1px;

        transform: rotateY(-90deg) rotateX(-90deg) translateZ(-64px) translateY(78px);

    }

    

    .bottom {

        width: 10px;

        height: 130px;

        background: black;

        border-radius: 1px;

        transform: rotateY(90deg) rotateX(-90deg) translateZ(264px) translateY(-78px);

    }

    

    .white_l_top {

        display: block;

        position: absolute;

        top: 13.5px;

        width: 10px;

        height: 2px;

        /*background: #4a4a4a;*/

        background: #636363;

    }

    

    .white_l_bottom {

        position: absolute;

        display: block;

        top: 277.5px;

        width: 10px;

        height: 2px;

        background: #636363;

    }

    

    .white_r_top {

        display: block;

        position: absolute;

        top: 13.5px;

        width: 10px;

        height: 2px;

        background: #636363;

    }

    

    .white_r_bottom {

        position: absolute;

        display: block;

        top: 277.5px;

        width: 10px;

        height: 2px;

        background: #636363;

    }

    

    .a1 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(-7px) rotateY(-66deg) translateX(-2px);

    }

    

    .a2 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(-6px) rotateY(-44deg) translateX(6px);

    }

    

    .a3 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(-3px) rotateY(-26deg) translateX(11px);

    }

    

    .b1 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(14px) rotateY(5deg) translateX(147px) rotateY(28deg);

    }

    

    .b2 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(14px) rotateY(6deg) translateX(152px) rotateY(37deg);

    }

    

    .b3 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(7px) rotateY(6deg) translateX(157px) rotateY(63deg);

    }

    

    .c1 {

        width: 11px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(-214px) rotateY(31deg) translateX(182px) rotateY(75deg);

    }

    

    .c2 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(-204px) rotateY(36deg) translateX(189px) rotateY(89deg);

    }

    

    .c3 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(-203px) rotateY(39deg) translateX(188px) rotateY(112deg);

    }

    

    .d1 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(-245px) rotateY(91deg) translateX(62px) rotateY(158deg);

    }

    

    .d2 {

        width: 11px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(-231px) rotateY(88deg) translateX(84px) rotateY(147deg);

    }

    

    .d3 {

        width: 10px;

        height: 10px;

        background: black;

        transform: rotateX(90deg) translateZ(-233px) rotateY(84deg) translateX(89px) rotateY(124deg);

    }

    </style>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>



<body>

    <div class="content">

        <div class="box">

            <div class="font"></div>

            <div class="back"></div>

            <div class="right">

                <span class='white_r_top'></span>

                <span class='white_r_bottom'></span>

            </div>

            <div class="left">

                <span class='white_l_top'></span>

                <span class='white_l_bottom'></span>

            </div>

            <div class="top"></div>

            <div class="bottom"></div>

            <div class="a1"></div>

            <div class="a2"></div>

            <div class="a3"></div>

            <div class="b1"></div>

            <div class="b2"></div>

            <div class="b3"></div>

            <div class="c1"></div>

            <div class="c2"></div>

            <div class="c3"></div>

            <div class="d1"></div>

            <div class="d2"></div>

            <div class="d3"></div>

        </div>

    </div>

</body>



</html>

<script>

//角度初始化

var RotateY = 0;

var RotateX = 0;



var flag = false; //定义一个标记,给个默认值false

// 定义刚开始的位置

var old_x = 0;

var old_y = 0;

document.onmousedown = function(e) {

    flag = true

    /*原本所处的位置*/

    old_x = e.pageX;

    old_y = e.pageY;

}

document.onmouseup = function() {

    flag = false;

    //鼠标抬起时结束

};

document.onmousemove = function(e) {

    if (flag) {

        var _x = e.pageX - old_x;

        var _y = e.pageY - old_y;

        /*新位置减去老位置*/

        console.log(_x, _y);

        RotateY += _x / 70;

        RotateX += -(_y / 70);

        $('.box').css({

            transition: 'linear',

            transform: 'rotateX(' + RotateX + 'deg) rotateY(' + RotateY + 'deg)'

        });

    }

};





</script>



<script>





</script>



       相信肯定还有许多小伙伴看了代码对此不是太懂，没关系。本人整理了三本word文档笔记，详细了介绍以上用到的所有css3属性，包括一些扩充的。还有对这个特效一个整体解析。

一下就是百度云资源链接。有兴趣的小伙伴们可以去下载看看，自己可以动手试试看。

链接: https://pan.baidu.com/s/1o7VUS3o 密码: sg42








two.png (13.59 KB, 下载次数: 17)

two.png
作者: 小影姐姐    时间: 2017-12-8 11:34
66666



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2