前端開發 滾滾屏(沒有縱向滾動條)

2021-07-10 23:50:20 字數 3081 閱讀 8169

1.前端流程:

1)需求分析

2)原型圖(低保真)——產品經理/設計師/策劃繪製      

3)做效果圖

4)**實現

4)360瀏覽器歡迎頁面    

3.若要用html5+css3做全屏(效果圖設計)

1)一般寬為1366px,如果是1920的解析度,則讓寬度自適應;高度一般做成768px或者700px

2)在ps或者fireworks新建畫布(寬度1366px,高度700px,解析度72,顏色模式rgb,背景白色)——》最上面1366*60px的導航(一般高度給定60,具體看原型圖)——》在導航上擺放logo(如果暫時沒有logo,可以直接敲字型「logo」或者其他能表明意思的內容)和字型——》選中項或者當前項給定乙個背景色(繪製乙個矩形)——》放入原型圖中的字型內容——》用矩形做button按鈕(此時放入所有的內容到設計圖裡面)

3)找到logo,進行替換——》如果沒有透明背景的logo,則要做處理——》導航字型處理為20px(具體視情況而定)——》字型為「微軟雅黑」

4)設定導航上面字型的間距:在前兩個之間敲入合適的空格——》雙擊選中空格——》複製空格到其他的導航字型之間

5)圖層分組——》頁面填充背景色——》新建圖層,做背景的漸變處理——》合併圖層,轉為智慧型物件(在ps中右擊)——》濾鏡——》畫素化/晶格化(具體視情況而定)——》編輯濾鏡(智慧型濾鏡可以編輯,普通圖層物件是沒法修改的)——》蒙版處理(使得濾鏡效果柔和)——》字型居中對齊

4.扁平化的好處:

1)效率高(適應不同的解析度)

2)便於修改

3)便於**編寫

5.關於數字的處理:

10000.00這種寫法的視覺衝擊力要比1萬強很多。(當然,如果是商品打折的這種情況則反之,具體視不同的情況,會有不同的視覺效果)

6.網際網路設計分類:(來自傳智)

7.滾滾屏的特點:

1)沒有縱向的滾動條

2)一般為全屏切換

3)通過滑鼠滾輪進行切換

4)每個螢幕都有切入和切出動畫(也可理解為淡入和淡出)

5)每個螢幕中都有可以互動的元素

8.滑鼠滾輪事件捕獲外掛程式:

滑鼠滾動事件的寫法:

執行效果:(檢視控制台console)

9.mousewheel方法的兩個引數:

10.注意:滑鼠滾輪滾動的時候,往下是-1,往上是1

11.if語句死鎖問題:

執行效果: 

如何解決這個問題呢?

執行效果: 

12.標準流中的盒子(塊級元素),如果不寫寬度,則寬度預設為父盒子的100%;如果脫離了標準流,則不再具備該特點。

脫離標準流的幾種方式:

1)position:absolute;

2)position:fixed;

3)float:left;

13.緩衝:

引用jquery.easie.js,並且新增下圖選中內容:

14.函式節流

函式節流,簡單地講,就是讓乙個函式無法在很短的時間間隔內連續呼叫,只有當上一次函式執行後過了你規定的時間間隔,才能進行下一次該函式的呼叫。

(參考部落格:

函式節流的解決辦法就是:設定定時器

15.fireworks用來做切片比較方便

用fireworks開啟psd檔案的時候,選擇「維持photoshop層外觀」——》開啟psd檔案——》複製圖層——》新建——》貼上——》匯出

16.色塊滾滾屏:

html

>

lang=

"en">

class=

"container">

class=

"page page0">

0class=

"page page1">

1class=

"page page2">

2class=

"page page3">

3class=

"page page4">

4

執行效果:(滾動到第二個頁面)

執行效果:

滾 滾 滾動條(移動端 二)

好的,現在更第二篇。先是點選事件莫名的點選一次然後竟然觸發了兩次,對沒錯,是兩次。頭皮都撓完了才發現問題,莫名的傷心 先是嘗試了點選新增事件,然後再解綁事件。結果還是不行。某位大神跟我說去看原始碼。最後強忍著牙進入原始碼,一番折騰知道一般情況下很多框架裡面其實都會 寫乙個重新整理的函式,這樣子問題就...

MFC縱向滾動條

1.新建乙個edit control,將其multiline屬性設定為true,auto hscroll屬性設定false,這樣就可以實現每一行填滿後自動換行了。2.再將vetrical scroll屬性設定為true,當輸入或顯示超過編輯框的大小後就會出現垂直滾動條。這乙個我並沒有試驗 3.如果是...

DIV實現縱向滾動條

overflow y scroll的使用 1.首先設定固定div的寬高 1.首先設定固定div的寬高 如果設定overflow auto 表示當你內容超過div高度出現滾動條 overflow語法如下 overflow visible auto hidden scroll 引數 visible 不剪...