【魅族Pro7】——BootStrap/JQuery/Canvas/PHP/MySQL/Ajax爬坑之项目总结（一）

前言：这个项目是我们小组团体合作完成的学习项目，项目使用魅族GUI设计和图片素材，响应式重构Pro7官网的首页、子页、商城及购物车，并加入一些创新。我主要负责的是【画屏子页】的项目，这里作为温故知新，把整个项目的重难点特色做一个整理。

github项目地址：https://github.com/66Web/ljq_meizuPro7_team，欢迎Star。

---

首页	概述	画屏

一、首页index

网页加载后才出现的效果是给window绑定onscroll事件，根据滚动条到页面顶部不同的角度设置透明度，以及其他属性，慢慢过渡。

$( ()=>{
    $(window).scroll(()=>{
            var scrollTop=document.body.scrollTop;
            var offsettop1=$(".five").offset().top;
     if(innerHeight/2+scrollTop>=offsettop1){
          $("#five-1").css({float:"left",width:"26%",left:"10%",top:"10%",transform:"rotate(0deg)"});
     }
    });
});

二、概述Summary

1、给二十多张图片设置过渡效果。

• 刚开始时透明度为0，后变为1，而图片是相继出现是因为为图片设置了延迟时间。
• 最后出现的手机图片是通过过渡缩小图片的宽度，定位在顶部和左边的位置，以及旋转的角度。

 <!--section-->
    <section>
        <div id="mw-1">
            <img src=" img/fAC875G3xtpLmNkPhdSTcVbXrYaW64e1.jpg" alt=""class="mw-f0" />
            <!--第一个过度-->
            <img src="img/mw1.jpg" class="mw-f11" alt="" />
            <img src="img/mw2.jpg" class="mw-f12" alt="" />
            <img src="img/mw3.jpg" class="mw-f13" alt="" />
            <img src="img/mw4.jpg" class="mw-f14" alt="" />
            <img src="img/f98D7F6H5J3L2NzwQRSTUsrpoZanmdkB.jpg" alt="" class="mw-f1"/>
            <!--第二个过度-->
            <img src="img/mw5.jpg" class="mw-f21" alt="" />
            <img src="img/mw6.jpg" class="mw-f22" alt="" />
            <img src="img/mw7.jpg" class="mw-f23" alt="" />
            <img src="img/mw8.jpg" class="mw-f24" alt="" />
            <img src="img/fACDEF6H4J21MN0PzxwtUVWXqonlckig.jpg" alt="" class="mw-f2"/>
            <!--第三个过度-->
            <img src="img/mw9.jpg" class="mw-f31" alt="" />
            <img src="img/mw10.jpg" class="mw-f32" alt="" />
            <img src="img/mw11.jpg" class="mw-f33" alt="" />
            <img src="img/mw12.jpg" class="mw-f34" alt="" />
            <img src="img/mw13.jpg" class="mw-f35" alt="" />
            <img src="img/mw14.jpg" class="mw-f36" alt="" />
            <img src="img/mw15.jpg" class="mw-f37" alt="" />
            <img src="img/mw16.jpg" class="mw-f38" alt="" />
            <img src="img/mw17.jpg" class="mw-f39" alt="" />
            <img src="img/fAC76FG4I10LMzyxvRtpoVnmlkibScEH.jpg" alt="" class="mw-f3"/>
            <!--第四个过度-->
            <img src="img/section-bg-1_e7c904e-1.jpg" alt="" class="mw-n0"/>
            <img src="img/phone-2_5e09475.png" alt="" class="mw-n1"/>
            <img src="img/phone-1_d6080e5.png" alt="" class="mw-n2"/>
            <div class="mw-n3">
                <h1>PRO <span>7</span></h1>
                <h1>双瞳如小窗</h1>
                <h1>佳景观历历</h1>
            </div>
        </div>
        <!--手机上浮-->
        <div id="mw-2">
            <img src="img/phone-3_6e3efd0.png" alt=""/>
        </div>

2、会飞的鸟

• 给div设置背景图，刚开始定位在第一只鸟的位置；
• 后先更改x的值，使背景从左到右切换
• 到最右后，更改y的值，跳到第二行
• 直到最后，将x，y切到第一个图位置
• 绑定的定时器是80ms

/*bird*/
var a=138;
var b=308;
var task=function(){
    if(a<=2622) {
        a+=138;
    }
    else if(a>2622&&b<=2156){
        a=138;
        b+=308;
    }
    else {
        a=138;
        b=308;
    }
    $("#mw-bird").css({
        'background':`url(img/bird-animate_cd8495f.jpg)  ${a}px ${b}px`
    });
};
var timer=setInterval(task,80);

3、设置渐变色动画

• 1%时为透明，10%时换#0b0b0b色，100%也换#0b0b0b色
• 当鼠标移入时，颜色切换，同时放大1倍

section #mw-7 .mw-img2 .s1_cover {
  position: absolute;
  width: 129%;
  height: 200%;
  top: -48%;
  left: -15%;
  background: radial-gradient(transparent 1%, #060606 10%, #060606 100%);
  transform: scale(1);
}
section #mw-7 .mw-img2 .s_cover {
  animation: s1_cover 3s linear 1.5s forwards;
}
@keyframes s1_cover {
  0% {
    background: radial-gradient(transparent 1%, #060606 10%, #060606 100%);
    transform: scale(1);
  }
  25% {
    background: radial-gradient(transparent 2%, #060606 10%, #060606 100%);
    transform: scale(2);
  }
  50% {
    background: radial-gradient(transparent 3%, #060606 10%, #060606 100%);
    transform: scale(3);
  }
  75% {
    background: radial-gradient(transparent 4%, #060606 10%, #060606 100%);
    transform: scale(4);
  }
  100% {
    background: radial-gradient(transparent 5%, #060606 10%, #060606 100%);
    transform: scale(5);
  }
}

4、温度对比图--三张图叠加，透明度横向过渡渐显模拟展开效果

• 第一张图，过渡效果，宽度从0→100%
• 第二张图，同理，只不过等第一张图加载完再开始加载
• 第三张图，是渐变色，开始透明度为0，后过渡为1

 <!--PRO 7 Plus 快充温度对比图-->
        <div id="mw-9">
            <div>
                <h4>PRO 7 Plus 快充温度对比图</h4>
            </div>
            <div class="mw-pro">
                <div class="mw-p1"></div>
                <div class="mw-p2"></div>
                <div class="mw-p3"></div>
            </div>
</div>

section #mw-9 .mw-pro .mw-p1 {
  position: absolute;
  height: 100%;
  top: 21%;
  left: 6%;
  width:;
  transition: width 2s linear;
  background: url("../img/pro6plus-line_adf47d9.png") no-repeat;
}
section #mw-9 .mw-pro .mw-p2 {
  position: absolute;
  height: 100%;
  top: 28%;
  left: 6%;
  width:;
  transition: width 2s linear 2s;
  background: url("../img/pro7-line_5028809.png") no-repeat;
}
section #mw-9 .mw-pro .mw-p3 {
  position: absolute;
  z-index:;
  height: 100%;
  width: 100%;
  top: 19%;
  left: 6%;
  opacity:;
  transition: opacity 2s linear 4s;
  background: url("../img/mCharge_9c82c4c.png") no-repeat;
}

5、了解-模态框

• 开始给div加一个a的子元素，设置背景图、定位、宽高、透明度为0
• 当鼠标移入onmouseenter时，背景图的透明度为0.1，top定位上移，图片的高度也变大，再设置了整个页面的模态框

/*了解模态框*/
(function(){
    var mw11=document.getElementById("mw-11");
    var backDrop=document.getElementById("shadow");
    mw11.onmouseenter=function(){
        backDrop.className="modalShadow";
    };
    mw11.onmouseleave=function(){
        backDrop.className="";
    };
})();

三、画屏huaping

1、漂动的水母

• @keyframe声明动画，在0%时，图片定在背景图的第一帧位置处（-15px，0），在100%时定在最后一帧的位置处（-12282px,0）
• 使用steps(87)函数实现关键帧动画，87代表背景图一共有87个帧，没一次动画移动87帧（步），设置8s，一次动画时长8s，无限制的移动

@keyframes playshuimu{
    0%{
        background-position: -15px 0px;
    }
    100%{
        background-position:-12282px 0px ;
    }
}
.hp_body .hp_bz .hp_img .hp_shuimu{
    background: url(../images/hp_shuimu.jpg) no-repeat;
    transform: scale(0.9);
    width:10%;
    height:48%;
    overflow: hidden;
    left:34%;
    margin-top: 27%;
    z-index:;
    position: absolute;
    animation:playshuimu 8s steps(87) infinite;
}

2、点击翻牌效果

• transform-style: preserve-3d将转换设置为3D类型
• 叠加两层图片，上层img1是点击之前的，下层img2是点击之后的，设置backface-visibility: hidden使转换到后面的图片显示属性为隐藏
• transform: rotateY(180deg) scale(1.26)   将img2沿y轴旋转180度，转到前面来，显示同时放大，img1同理旋转-180度，转到后面，同时隐藏

.hp_body .hp_tz .hp_tz_list li .img2{
    position:absolute;
    top:-50%;
    z-index: -1;
    transform: rotateY(180deg) scale(1.26);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all .4s ease-in-out;
}
.hp_body .hp_tz .hp_tz_list li .img1{
    position:relative;
    transform: rotateX(0deg) rotateY(0deg) scale(1);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all .4s ease-in-out;
}
.hp_body .hp_tz .hp_tz_list li:hover .img1{
    transform: rotateY(-180deg);
}
.hp_body .hp_tz .hp_tz_list li:hover .img2{
    transform: rotateX(0deg) rotateY(0deg)
    position:absolute;
}

---

版权声明：本文原创，非本人允许不得转载