摘要：任務(wù)名稱響應(yīng)式砸蛋頁面任務(wù)背景前輩方方啊最近項(xiàng)目也沒什么事情你看這個(gè)砸蛋頁面不是很好看要不你做一個(gè)響應(yīng)式砸蛋頁面吧系統(tǒng)鄭方方接下前輩的任務(wù)鄭方方自動(dòng)解析任務(wù)步驟任務(wù)響應(yīng)式砸蛋頁面與入門閱讀秘籍響應(yīng)式布局制作層搭配搭配控制器完成任務(wù)人物背

前輩:方方啊,最近項(xiàng)目也沒什么事情,你看這個(gè)砸蛋頁面不是很好看,要不你做一個(gè)響應(yīng)式砸蛋頁面吧?

系統(tǒng):鄭方方接下前輩的任務(wù) - 鄭方方自動(dòng)解析任務(wù)步驟

任務(wù):響應(yīng)式砸蛋頁面

HTML5與CSS3入門 - 閱讀《HTML5秘籍》（0/1）

響應(yīng)式布局（0/1）

制作Canvas層（0/1）

搭配Javascript（0/1）

搭配PHP控制器 （0/1）

完成任務(wù)（0/1）

人物背景介紹:鄭方方

主職:小白PHP碼畜;副職:Acer

技能:吃飯、睡覺

特征:單身狗

響應(yīng)式布局 Begin

因?yàn)槲也皇乔岸?所以使用Bootstrap的visible-xs和hidden-xs,對(duì)于一些特殊的要求就是用 @media 來進(jìn)行調(diào)節(jié).
我使用的是不知道從哪里介紹的幾種尺寸范圍,如下:

@media (min-width: 970.1px) and (max-width: 1170px)

@media (min-width: 700.1px) and (max-width: 970px)

@media (min-width: 600px) and (max-width: 700px)

@media (min-width: 400px) and (max-width: 599.99px)

@media (max-width: 399.99px)

對(duì)于頁面布局,我借助了 http://www.ibootstrap.cn/ 這個(gè)網(wǎng)站,之后再把代碼下載下來自己進(jìn)行修改.

Tip:垂直居中（主要是用于蛋一直在頁面中間）

    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;

響應(yīng)式布局（1/1）Over

制作Canvas層 Begin

制作Canvas層時(shí)我把動(dòng)畫分為三個(gè)

EggCanvas - 蛋（無其他CSS3效果）

HammerCanvas - 錘子（animation、rotate）:錘子砸下去后錘子會(huì)復(fù)位

BoomCanvas - 爆炸特效（animation、transform、opacity）:Ajax查詢后爆炸變大并消失

Tip:為了讓這些效果能兼容更多瀏覽器,我要這幾個(gè)效果就會(huì)像下面代碼,比如我的錘子效果

.AniHammer {
animation: AniHammer 0.5s;
-moz-animation: AniHammer 0.5s; /* Firefox */
-webkit-animation: AniHammer 0.5s; /* Safari and Chrome */
-o-animation: AniHammer 0.5s; /* Opera */
}

@keyframes AniHammer {
    /*25% {*/
        /*transform: rotate(45deg);*/
    /*}*/
    50% {
        transform: rotate(-135deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@-moz-keyframes AniHammer /* Firefox */
    {
    /*25% {*/
        /*-moz-transform: rotate(45deg);*/
    /*}*/
    50% {
        -moz-transform: rotate(-135deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}

@-webkit-keyframes AniHammer /* Safari and Chrome */
    {
    /*25% {*/
        /*-webkit-transform: rotate(45deg);*/
    /*}*/
    50% {
        -webkit-transform: rotate(-135deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-o-keyframes AniHammer /* Opera */
{
    /*25% {*/
        /*-o-transform: rotate(45deg);*/
    /*}*/
    50% {
        -o-transform: rotate(-135deg);
    }
    100% {
        -o-transform: rotate(0deg);
    }
}

這一段樣式就是在0.5秒內(nèi)，把動(dòng)畫效果分兩步,第一步旋轉(zhuǎn)到-135度,第二步就是旋轉(zhuǎn)回0度.其中的-o-,-webkit-,-moz-就是為了兼容.

搭配Javascript Begin

我不知道剛接觸的人會(huì)怎么想Javascript 和 CSS3 的關(guān)系,我最開始的時(shí)候還以為JS能控制CSS3的動(dòng)畫行為呢,現(xiàn)在我感覺JS只能通過控制元素的Class的attr( )或者removeclass( ),來完成我們想要的CSS3的一系列動(dòng)畫行為. (可能我現(xiàn)在還理解不夠深,有誰理解的,麻煩給我科普科普)

移動(dòng)端和PC端分別對(duì)應(yīng)兩個(gè)事件:Touch事件和Click事件,Touch事件如下:

var EggTouch = function (){console.log("Hi")};
document.getElementById("LuckEgg").addEventListener("touchstart", EggTouch, false);

但是Canvas層產(chǎn)生的圖片,了解過的人都知道需要用JS去生成圖像

// 1.加載蛋的圖片
var EggCanvas = document.getElementById("LuckEgg");
var EggContext = EggCanvas.getContext("2d");
var EggImg = new Image();

EggImg.src = "./egg.png";

// 特別注意 - 要圖片加載完才會(huì)出現(xiàn)圖片
EggImg.onload = function () {

    // 還要在這里判斷屏幕大小 --- 用于確定生成的蛋的位置和大小
    EggContext.drawImage(EggImg, 30, 20, 240, 120);
};

Tip:

每一次JS控制帶有自動(dòng)執(zhí)行的動(dòng)畫效果的元素,使其display:block,就會(huì)自動(dòng)執(zhí)行動(dòng)畫效果;

使用setTimeout( )來完成某些效果,比如我的Boom效果爆炸持續(xù)時(shí)間是0.5秒,那么我就要在Boom后0.5秒再去執(zhí)行其他函數(shù).,這樣就能得到我們想要的效果.

制作Canvas層（1/1）Over
搭配Javascript（1/1）Over

搭配PHP控制器 Begin

如果你們跟我一樣同時(shí)使用了Touch和Click這兩個(gè)事件,那么可能會(huì)出現(xiàn)在瀏覽器測(cè)試的時(shí)候,鼠標(biāo)點(diǎn)擊模擬手機(jī)狀態(tài)下的touch行為,就會(huì)有兩次POST傳到后臺(tái),這就可能出現(xiàn)客戶投訴說:我砸蛋砸了一次,怎么次數(shù)就沒了.之類的話語.所以在后臺(tái)我會(huì)用redis做一個(gè)很簡(jiǎn)單的鎖,防止上面的情況的發(fā)生.

/** 防止touch 和 click 同時(shí)觸發(fā) */
        self::$lock .= $user["uid"];
        self::$luckValue = CommonCommonMyRedis::getInstance()->get(self::$lock);
        if (self::$luckValue && time() - self::$luckValue <= 1) {
            exit;
        } else {
            CommonCommonMyRedis::getInstance()->set(self::$lock, time(), 2);
        }

搭配PHP控制器 (1/1)

完成任務(wù)（1/1）

到此,任務(wù)也就做完了,其中一些比如什么字體大小,怎么查數(shù)據(jù)庫(kù),怎么控制JS的一些業(yè)務(wù)細(xì)節(jié)我就不多說了.
畢竟我也只是第一次寫博客,文中有什么錯(cuò)誤,或者思路有問題,還希望各位看客能指點(diǎn)指點(diǎn).