【上海校区前端学科- hwd】360度全方位玩转iPhone X

2017-11-13 14:52 上传

本帖最后由 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

小影姐姐 · 小影姐姐

66666

帐号		自动登录	找回密码
密码			加入黑马

【上海校区前端学科- hwd】360度全方位玩转iPhone X

1 个回复