中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

從下半年開始，我嘗試在活動(dòng)頁(yè)面中添加css3動(dòng)畫，讓標(biāo)準(zhǔn)瀏覽器的用戶能夠看到更加炫的效果。一直小打小鬧的試驗(yàn)著各種效果~前不久，鬼哥跟我說(shuō)有個(gè)活動(dòng)要大量使用css3動(dòng)畫，各種動(dòng)！內(nèi)心一陣狂喜~~

這是與南航公司合作的活動(dòng)，用戶通過(guò)選擇航線(歐洲線或北美線)，每個(gè)航線4個(gè)城市，完成航線后轉(zhuǎn)發(fā)微博即可參與抽獎(jiǎng)。城市間通過(guò)css3動(dòng)畫轉(zhuǎn)場(chǎng)切換，對(duì)于IE瀏覽器通過(guò)JS做切換。每個(gè)城市還會(huì)使用css3讓小元素動(dòng)起來(lái)。

1. 活動(dòng)HTML剖析
2. 動(dòng)畫實(shí)現(xiàn)
3. 遇到的問(wèn)題及解決方法
   • 按需加載
   • 圖片裁剪
   • 圖片文字
   • 自適應(yīng)
   • fixed定位問(wèn)題
4. 經(jīng)驗(yàn)總結(jié)

【活動(dòng)HTML剖析】

由于航程的8個(gè)城市需要隨著地球轉(zhuǎn)動(dòng)進(jìn)行切換，8個(gè)城市的內(nèi)容需要對(duì)底部的地球相對(duì)定位，這樣控制地球轉(zhuǎn)動(dòng)就能實(shí)現(xiàn)城市轉(zhuǎn)場(chǎng)。

【動(dòng)畫實(shí)現(xiàn)】

1.地球是由CSS3繪制出來(lái)的一個(gè)大圓，把各個(gè)城市的圖片定位在大圓上面，滾動(dòng)大圓達(dá)到切換城市轉(zhuǎn)場(chǎng)的效果。

2. 城市內(nèi)的元素漂浮
都是使用的以下這個(gè)動(dòng)畫，對(duì)元素位移的變化以及旋轉(zhuǎn)。只是播放時(shí)間的長(zhǎng)短不同~這樣可以簡(jiǎn)化代碼的同時(shí)又能實(shí)現(xiàn)需要的效果。

【遇到問(wèn)題以及解決】

1. 按需加載

【過(guò)程嘗試】
最初前端同學(xué)以為是使用主站那種img標(biāo)簽不進(jìn)入屏幕的圖片就不進(jìn)行加載。
溝通后，前端同學(xué)提出把圖片加在HTML，由ID控制載入，如下圖結(jié)構(gòu)：

但是很快認(rèn)識(shí)到，圖片最先已經(jīng)在樣式中加載了，JS無(wú)法控制。前端同學(xué)提出樣式按需加載。
需要重構(gòu)把大樣式分離成以下部分，由JS動(dòng)態(tài)加載。

但是JS只能用Link的形式把樣式插入頁(yè)面，不方便重構(gòu)更新樣式時(shí)間戳。

【目前方案】
經(jīng)溝通，Wynn提出了更好的方法：

把樣式名寫在節(jié)點(diǎn)的自定義屬性，需要加載時(shí)使用JS給節(jié)點(diǎn)的class屬性賦上自定義熟悉的值，此時(shí)，客戶端才會(huì)請(qǐng)求相應(yīng)的圖片。

1. 保持樣式完整，方便更改時(shí)間戳以及后期維護(hù)。
2. 請(qǐng)求縮減為一個(gè)，比之前分成7個(gè)樣式相應(yīng)需要發(fā)送7個(gè)請(qǐng)求節(jié)省了發(fā)送時(shí)間和等待時(shí)間（1ms+4ms）*(7-1)=30ms，而實(shí)際上，拆分后的樣式字節(jié)數(shù)請(qǐng)求會(huì)比整個(gè)樣式大，節(jié)省的時(shí)間是>30ms的。

2. 圖片裁剪

活動(dòng)的圖片太多，除了通過(guò)按需加載控制，還要在裁剪的時(shí)候控制輸出大小。以求最優(yōu)。例如：飛機(jī)正著切是95.4k，而按設(shè)計(jì)稿斜著切是114.4k，相差19K。但是對(duì)于不支持旋轉(zhuǎn)的IE需要使用濾鏡，這個(gè)相對(duì)又減慢速度了。

那嘗試對(duì)斜切的飛機(jī)進(jìn)行無(wú)損壓縮：

除了通過(guò)無(wú)損壓縮還可以在裁切的時(shí)候，多注意細(xì)節(jié)。例如，當(dāng)背景圖大于100K，我會(huì)把它拆分成幾個(gè)圖片再合成，此時(shí)根據(jù)元素高度進(jìn)行裁切就可以省下字節(jié)數(shù)。

3. 圖片文字

每個(gè)城市的右側(cè)文字視覺(jué)使用了手寫體，所以都是使用的圖片，這給維護(hù)帶來(lái)麻煩。

至此更換了兩次，每次更換8個(gè)城市需要一天，因?yàn)槠渲羞€包括鏈接按鈕圖片定位。
【過(guò)程嘗試】
方案1，為了更好的替換，嘗試在說(shuō)明文字使用微軟雅黑字體，但是設(shè)計(jì)師認(rèn)為沒(méi)有達(dá)到活動(dòng)的設(shè)計(jì)效果，只有放棄了。

方案2，有童鞋提出了可以使用@font-face，我試驗(yàn)了一下，它的優(yōu)點(diǎn)是適合SEO，特別適合用于英文字體。但對(duì)于中文字體，動(dòng)輒幾M，目前還沒(méi)有工具可以實(shí)現(xiàn)把需要使用的特殊字體抽離；而且在網(wǎng)頁(yè)上引用字體需要獲取引用版權(quán)。鑒于此，使用@font-face的想法，在有限的時(shí)間內(nèi)，只能放棄了。

方案3，保留拼合文件的文字PSD，后續(xù)有修改邀請(qǐng)視覺(jué)直接修改拼合PSD。
【目前方案】
最后使用了方案3，希望以后能有更好的方案。

3. 自適應(yīng)

活動(dòng)的主要元素都使用了絕對(duì)定位，脫離了文本流，所以只能識(shí)別body內(nèi)的高度，那如何做到自適應(yīng)成了個(gè)問(wèn)題。
【過(guò)程嘗試】
地球的圓的直徑是2226px，多余的部分是對(duì)body使用了overflow:hidden;
但是這個(gè)設(shè)置會(huì)導(dǎo)致窗口縮小后無(wú)法出現(xiàn)滾動(dòng)條，如果要出現(xiàn)滾動(dòng)條就會(huì)把下方要隱藏的球暴露出來(lái)~~

方案1，對(duì)每個(gè)城市里面的內(nèi)容加個(gè)固定高度的容器，那就能把多余的地球部分隱去，但是這樣做需要對(duì)每個(gè)城市里的元素都重新定位，因?yàn)槊總€(gè)城市高度不一樣，還需要統(tǒng)一高度，不夠便利，否決。

方案2，使用一個(gè)木有元素但屬于文檔流中的div，包裹住地球。針對(duì)該活動(dòng)把div的最小寬高分別設(shè)為755px，1250px。即使div內(nèi)沒(méi)有元素，但是當(dāng)窗口小于這個(gè)值就會(huì)觸發(fā)body產(chǎn)生滾動(dòng)條。

但是，由于頁(yè)面內(nèi)的內(nèi)容都不在正常文檔流中，在chrome等標(biāo)準(zhǔn)瀏覽器就只能識(shí)別到容器的最小高度為755px，無(wú)法使城市的CSS3漸變背景隨著高度自適應(yīng)。嘗試了padding:9999px;margin:-9999px的方法也沒(méi)有作用。嘗試通過(guò)JS給body動(dòng)態(tài)更新min-height的值，但是前端同學(xué)沒(méi)有實(shí)現(xiàn)。
【目前方案】
最后使用了方案2實(shí)現(xiàn)自適應(yīng)的問(wèn)題，漸變的實(shí)現(xiàn)只有舍棄了，希望以后有更好的解決方法。

4. fixed定位問(wèn)題

由于界面元素太多。當(dāng)窗口變窄的話，元素會(huì)重疊在一起。
主要原因是下面的圓使用了fixed，定位在頁(yè)面最下方。

解決辦法就是當(dāng)頁(yè)面高度小于臨界值的時(shí)候，把地球的定位改為絕對(duì)定位，使得上面元素不被遮住。這個(gè)在chrome等標(biāo)準(zhǔn)瀏覽器可以通過(guò)下面媒體查詢的方法實(shí)現(xiàn)：

對(duì)于IE類瀏覽器只有通過(guò)JS判斷可視區(qū)域的高度，對(duì)body節(jié)點(diǎn)增加.min-heigh的樣式，對(duì)該樣式下的元素進(jìn)行自定義。

【經(jīng)驗(yàn)總結(jié)】

1. 使用動(dòng)畫可以做在大動(dòng)作上，小元素可以使用gif替代，提高性能。
2. 預(yù)知修改，拼合圖保存好完整的PSD。
3. 管理好自己的本地開發(fā)文件，不與JS文件混用，避免JS影響頁(yè)面效果，也可以方便別人調(diào)試查看，還可以帶回家做。
4. 遇到難題多和同事溝通，思路會(huì)清晰明了。柳暗花明又一村。非常感謝鬼哥，fish，wynn，德生，佳佳，jojo等童鞋給予的建議與幫助。

來(lái)源：騰訊TID