A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 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属性,包括一些扩充的。还有对这个特效一个整体解析。

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









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

two.png

1 个回复

倒序浏览
66666
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马