為確保事情或工作順利開(kāi)展，常常要根據(jù)具體情況預(yù)先制定方案，方案是綜合考量事情或問(wèn)題相關(guān)的因素后所制定的書(shū)面計(jì)劃。大家想知道怎么樣才能寫(xiě)一篇比較優(yōu)質(zhì)的方案嗎？接下來(lái)小編就給大家介紹一下方案應(yīng)該怎么去寫(xiě)，我們一起來(lái)了解一下吧。
前端大屏開(kāi)發(fā) 前端大屏解決方案篇一
實(shí)現(xiàn)技術(shù)
：css+html+js+h5+css3+jqury；項(xiàng)目難點(diǎn)
：2.帶陰影折線運(yùn)動(dòng)處理
對(duì)于傾斜的span通過(guò)js改變其高度，并且按照數(shù)學(xué)邏輯改變top和left值的情況下，span在運(yùn)動(dòng)時(shí)候會(huì)出現(xiàn)偏移，和抖動(dòng)。 解決方案：給span一個(gè)運(yùn)動(dòng)基準(zhǔn)點(diǎn)，這樣span在運(yùn)動(dòng)的時(shí)候就無(wú)需改變top和left值，只需要改變寬度或高度即可。3.拋物線的運(yùn)動(dòng)
css中兩個(gè)點(diǎn)運(yùn)動(dòng)都是直線運(yùn)動(dòng)。 解決方案：給初始點(diǎn)一個(gè)旋轉(zhuǎn)角度，這樣看起來(lái)就有拋物線的感覺(jué)。4.遮罩層處理
在多層級(jí)的html渲染中，中間圖層的遮罩效果無(wú)法實(shí)現(xiàn)。 解決方案：遮罩層可以在最底層使用，但是中間層級(jí)的遮罩效果需要對(duì)圖片進(jìn)行處理，改成png圖片，再進(jìn)行css操作。5.卡頓的處理
在firefox和ie中，小圖標(biāo)的緩慢移動(dòng)效果會(huì)出現(xiàn)卡頓。 解決方案：給運(yùn)動(dòng)時(shí)間的時(shí)候，判斷如果不是chrome瀏覽器，減小運(yùn)動(dòng)時(shí)間。6.性能的優(yōu)化
圖片的使用讓動(dòng)畫(huà)加載的速度變慢，影響用戶體驗(yàn)。 解決方案：對(duì)部分能使用span代替的圖片采用span生成，對(duì)代碼，圖片進(jìn)行深度壓縮上傳等。前端大屏開(kāi)發(fā) 前端大屏解決方案篇二
項(xiàng)目：騰訊管家前端動(dòng)畫(huà)
作品描述：該項(xiàng)目將一個(gè)完整flash劇情動(dòng)畫(huà)還原成一個(gè)由js+css3實(shí)現(xiàn)的前端動(dòng)畫(huà)。
實(shí)現(xiàn)技術(shù)：css+html+js+h5+css3+jqury；
項(xiàng)目難點(diǎn)：
1.定時(shí)器的清除
2.帶陰影折線運(yùn)動(dòng)處理
對(duì)于傾斜的span通過(guò)js改變其高度，并且按照數(shù)學(xué)邏輯改變top和left值的情況下，span在運(yùn)動(dòng)時(shí)候會(huì)出現(xiàn)偏移，和抖動(dòng)。
解決方案：給span一個(gè)運(yùn)動(dòng)基準(zhǔn)點(diǎn)，這樣span在運(yùn)動(dòng)的時(shí)候就無(wú)需改變top和left值，只需要改變寬度或高度即可。
3.拋物線的運(yùn)動(dòng)
css中兩個(gè)點(diǎn)運(yùn)動(dòng)都是直線運(yùn)動(dòng)。
解決方案：給初始點(diǎn)一個(gè)旋轉(zhuǎn)角度，這樣看起來(lái)就有拋物線的感覺(jué)。
4.遮罩層處理
在多層級(jí)的html渲染中，中間圖層的遮罩效果無(wú)法實(shí)現(xiàn)。
解決方案：遮罩層可以在最底層使用，但是中間層級(jí)的遮罩效果需要對(duì)圖片進(jìn)行處理，改成png圖片，再進(jìn)行css操作。
5.卡頓的處理
在firefox和ie中，小圖標(biāo)的緩慢移動(dòng)效果會(huì)出現(xiàn)卡頓。
解決方案：給運(yùn)動(dòng)時(shí)間的時(shí)候，判斷如果不是chrome瀏覽器，減小運(yùn)動(dòng)時(shí)間。
6.性能的優(yōu)化
圖片的使用讓動(dòng)畫(huà)加載的速度變慢，影響用戶體驗(yàn)。
解決方案：對(duì)部分能使用span代替的圖片采用span生成，對(duì)代碼，圖片進(jìn)行深度壓縮上傳等。
前端大屏開(kāi)發(fā) 前端大屏解決方案篇三
1、確定需要適配屏幕的大小，雖然我們前端默認(rèn)大屏的1920*1080起步的，但是防止有人不懂開(kāi)發(fā)前需要新搞清楚適配范圍；
2、和ui說(shuō)清楚字體大小盡量在12px以上，一是12px以下寫(xiě)起來(lái)麻煩；二是12px以下在大屏中展示效果不好；
3、不同大小屏幕的適配方法 我使用的是zoom，其中1920是設(shè)計(jì)稿的寬度
當(dāng)然transform scale 和rem等方式也行；
4、大屏中有很多樣式很難實(shí)現(xiàn)，可能會(huì)使用很多圖片代替，圖片太多可以使用雪碧圖來(lái)優(yōu)化；
5、datav組件庫(kù)中的輪播表config數(shù)據(jù)更新后視圖不發(fā)生變化的解決方法：
7、 實(shí)現(xiàn)下圖的進(jìn)度條效果
使用背景圖片
前端大屏開(kāi)發(fā) 前端大屏解決方案篇四
項(xiàng)目描述
：本項(xiàng)目是一款手機(jī)端app，采用vue框架構(gòu)建，其中涉及swiper觸控滑動(dòng)模塊，slide子頁(yè)之間采用了懶加載技術(shù)保證用戶體驗(yàn)，iscroll上拉加載下拉刷新模塊，購(gòu)物車(chē)模塊與登錄注冊(cè)模塊均采用了本地存儲(chǔ)技術(shù)。崗位職責(zé)
：主要負(fù)責(zé)頁(yè)面的布局和數(shù)據(jù)渲染，并且配合app完成頁(yè)面的嵌套。項(xiàng)目架構(gòu)
：1.使用vue框架，以及vue-router構(gòu)建單頁(yè)面應(yīng)用。 2.項(xiàng)目采用vuex處理各組件間的通訊，vue-resource處理請(qǐng)求，使用mint-ui組件庫(kù)中部分功能進(jìn)行快速開(kāi)發(fā)，通過(guò)vue-cli 快速搭建開(kāi)發(fā)環(huán)境。 3.采用手機(jī)淘寶適配方案。 4.使用阿里矢量圖標(biāo)庫(kù)。
技術(shù)要求
：1. 運(yùn)用html5語(yǔ)義化標(biāo)簽+css3新特性進(jìn)行頁(yè)面布局，實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)效果，提高代碼的清 晰度和代碼質(zhì)量，將頁(yè)面體現(xiàn)的更加豐滿，代碼更健壯。
2. 運(yùn)用開(kāi)發(fā)，采用前后端分離開(kāi)發(fā)模式。
3. 運(yùn)用中的指令和服務(wù)與后臺(tái)接口對(duì)接，進(jìn)行數(shù)據(jù)交互，進(jìn)行頁(yè)面渲染，實(shí)現(xiàn)功能 模塊的判斷。
4. 使用javascript實(shí)現(xiàn)某些功能的邏輯處理和某些頁(yè)面的動(dòng)態(tài)效果。
5. 項(xiàng)目測(cè)試階段可以自己用node連接數(shù)據(jù)庫(kù)進(jìn)行接口對(duì)接和數(shù)據(jù)渲染模擬，測(cè)試功能模塊 是否完善，邏輯處理是否正確。
6. 運(yùn)用swiper框架進(jìn)行部分頁(yè)面的設(shè)計(jì)。
7. 運(yùn)用sass進(jìn)行代碼的編寫(xiě)，運(yùn)用gulp進(jìn)行代碼的整理和壓縮。
