【魅族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: 0; 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: 0; 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: 1000; height: 100%; width: 100%; top: 19%; left: 6%; opacity: 0; 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: 999; 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;
}

 

---

 版權聲明：本文原創，非本人允許不得轉載