前端開發——滾滾屏(沒有縱向滾動條)
1.前端流程:
1)需求分析
2)原型圖(低保真)——產品經理/設計師/策劃繪製
3)做效果圖
4)程式碼實現
2.優秀網站欣賞:
1)百度錢包 一分錢專享 : https://1.baidu.com/
2)微信T管家 http://www.weixint.com/
3)QQ PC版 http://im.qq.com/pcqq/
4)360瀏覽器歡迎頁面 http://se.360.cn/wel/welcome.html
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.滑鼠滾輪事件捕獲外掛:
在http://plugins.jquery.com/——》下載 jquery.mousewheel.min.js外掛
滑鼠滾動事件的寫法:
<script src="js/jquery-1.11.3.min.js"執行效果:(檢視控制檯console)></script> <script src="js/jquery.mousewheel.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //頁面ready的時候執行 $(document).mousewheel(function(){ //當滾動滑鼠滾輪時要執行下面的內容 console.log("正在測試滑鼠滾動"); }); }); </script>
9.mousewheel方法的兩個引數:
<script type="text/javascript"> $(document).ready(function(){ //頁面ready的時候執行 $(document).mousewheel(function(event,delta){ //當滾動滑鼠滾輪時要執行下面的內容 // console.log("正在測試滑鼠滾動"); // console.log(event); //檢視event有哪些值 console.log(event.pageX,event.pageY); //滑鼠滾輪往下,輸出-1,往上滾,輸出1 console.log(delta); //檢視delta的輸出 }); }); </script>
10.注意:滑鼠滾輪滾動的時候,往下是-1,往上是1
11.if語句死鎖問題:
<script type="text/javascript"> $(document).ready(function(){ var nowPage=0; //用nowPage來模擬當前頁面的序列號,合法值為0、1、2、3、4 //滑鼠滾輪的事件捕獲 $(document).mousewheel(function(e,delta){ if(nowPage>=0&&nowPage<4){ //向下滾動,delta為-1;向上滾動,delta的值為1 nowPage=nowPage-delta; }else { console.log("超出了合法的頁面序號"); } console.log(nowPage); }); }); </script>執行效果:
如何解決這個問題呢?
<script type="text/javascript"> $(document).ready(function(){ var nowPage=0; $(document).mousewheel(function(e,delta){ nowPage=nowPage-delta; if(nowPage<0){ //如果nowpPage小於0,就讓它=0 nowPage=0; } if(nowPage>4){ //如果nowPage大於4,就讓它=4 nowPage=4; } console.log(nowPage); }); }); </script>執行效果:
12.標準流中的盒子(塊級元素),如果不寫寬度,則寬度預設為父盒子的100%;如果脫離了標準流,則不再具備該特點。
脫離標準流的幾種方式:
1)position:absolute;
2)position:fixed;
3)float:left;
13.緩衝:
下載JQuery.easie.js外掛,http://jaukia.github.io/easie/
引用JQuery.easie.js,並且新增下圖選中內容:
14.函式節流
函式節流,簡單地講,就是讓一個函式無法在很短的時間間隔內連續呼叫,只有當上一次函式執行後過了你規定的時間間隔,才能進行下一次該函式的呼叫。
(參考部落格:http://www.cnblogs.com/webhelper/p/3711256.html)
函式節流的解決辦法就是:設定定時器
15.fireworks用來做切片比較方便
用fireworks開啟psd檔案的時候,選擇“維持Photoshop層外觀”——》開啟psd檔案——》複製圖層——》新建——》貼上——》匯出
16.色塊滾滾屏:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滾滾屏的書寫</title> <style type="text/css"> /*清除樣式*/ * { margin: 0; padding: 0; } html, body { height: 100%; /*層層上推之後得到HTML高度要給定100%*/ /*body的高度是HTML高度的百分比*/ overflow: hidden; /*隱藏其他的螢幕*/ } /*body{*/ /*height: 100%;*/ /*}*/ .container { width: 100%; /*加上這行程式碼,因為新增定位以後它脫標(脫離標準流)了,就沒有高度了*/ height: 100%; /*container的高度是來自body的*/ position: absolute; /*page的父盒子container要能移動,帶動page的移動,則要給container進行定位*/ top: 0; /*top:-100%; !*檢視第二個螢幕*!*/ left: 0; } .page { width: 100%; /* 百分比參考的永遠是父盒子*/ height: 100%; /*page的高度為container的百分百,所以檢視container的高度*/ background-color: pink; } .page1 { background-color: blue; } .page2 { background-color: red; } .page3 { background-color: yellow; } .page4 { background-color: green; } </style> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.mousewheel.min.js"></script> <script src="js/jquery.easie.js"></script> <script type="text/javascript"> $(document).ready(function () { var currentPage = 0; //當前的頁面數 var lock = true; //函式節流,給定的一個變數 $(document).mousewheel(function (e, delta) { if (lock) { currentPage = currentPage - delta; if (currentPage < 0) { currentPage = 0; } if (currentPage > 4) { currentPage = 4; } console.log(currentPage); // 讓container進行動畫 $(".container").animate( { "top": currentPage * -100 + "%" //通過負的100%的倍數來獲取到其他的螢幕內容 } , 300 //時間 , "easieEaseOutCubic" //新增easie.js類庫後新增該運動方式名稱 ); //函式節流 lock = false; //設定一個定時器,當這個時間到了以後,Lock又恢復為true setTimeout(function(){ lock=true; },1000); } }); }); </script> </head> <body> <div class="container"> <!--div.page.page$*5+Tab鍵輸出下面的內容--> <!--page類是一個公共類--> <div class="page page0">0</div> <div class="page page1">1</div> <div class="page page2">2</div> <div class="page page3">3</div> <div class="page page4">4</div> </div> </body> </html>
執行效果:(滾動到第二個頁面)
17.若要把上面的色塊替換成背景圖片,則:
.page { width: 100%; /* 百分比參考的永遠是父盒子*/ height: 100%; /*page的高度為container的百分百,所以檢視container的高度*/ background:url("images/page0_bg.jpg") no-repeat; background-size: cover; /*拉伸為盒子大小*/ }
執行效果:
(學習視訊來自傳智,感謝傳智老師的奉獻)
相關推薦
前端開發——滾滾屏(沒有縱向滾動條)
1.前端流程: 1)需求分析 2)原型圖(低保真)——產品經理/設計師/策劃繪製 3)做效果圖 4)程式碼實現 2.優秀網站欣賞: 1)百度錢包 一分錢專享 : https://1.b
textarea如何實現高度自適應(不出現滾動條)
今天需要些一個回覆評論的頁面,設計師給的初始介面就是一個只有一行的框。然後當時就想這個互動該怎麼實現比較好,然後想起了新浪微博的做法:點選評論,預設顯示一行,當輸入的文字超過一行或者輸入Enter時,輸入框的高度會隨著改變,直到輸入完畢。頓時覺得這個細節做得挺不錯的,可以效仿下。下面分享2種實現text
DataTables自定義表格寬度(設定橫向滾動條)
當表格的列比較多時 橫向列太擁擠 這時候需要自定義寬度 設定橫向滾動條 1.html程式碼 <div id="tableArea"> <table id="tabl
DataTables列過多時固定表格寬度(設定橫向滾動條)
當表格的列比較多的時候,可能就需要固定表格的寬度了,預設的100%寬已經不適應了。預設的100%寬要實現改變視窗大小也100%的話,在table元素上新增width="100%",至於css的100%為什麼不生效,原因未知。下面就說說設定如何給datatables設定固定的寬
web前端開發面試題(未完待續)
tex ora 相對 設置 erl 思路 實現 多列 寬度 一、HTML與XHTML的不同:1)XHTML元素必須被正確地嵌套 2)元素必須被關閉 如:<h1>……&l
Web前端開發必備手冊(Cheat sheet)
mysql .html cheat AC devel 表達式 則表達式 develop b前端開發 轉自:http://blog.bingo929.com/cheat-sheets-for-web-develop.html Cheat sheet這個詞組如果直譯成中
微信小程式前端開發踩坑(一)
之前由於不瞭解微信小程式的整個的執行開發機制,走了很多的彎路,腦子靈光的可能不會遇到,這個主題系列的帖子希望可以幫助到像我一樣理解能力慢的孩子。 不論是開發微信小程式還是說學習任何一門程式語言,最重要的一點是要夯實基礎,不是隻是去看看概念,從hello word開始就要好好的去對待每一行程式碼,軟工是工科,
vue前端開發那些事(1)
如上圖所示,用vue開發一個小型網站所涉及到的知識點。這只是前端部分已經這麼多了。接下來我分解開來說。 1、Node 當我們開發vue專案的時候,首先要安裝Node.js,那麼我們即使當時不理解為什麼,但是專案完成後,應該抽個空,理解下。有兩個問題: a、什麼是Node? b、No
主流瀏覽器核心介紹(前端開發值得了解的瀏覽器核心歷史)
核心 首先得搞懂瀏覽器核心究竟指的是什麼。 瀏覽器核心又可以分成兩部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它負責取得網頁的內容(HTML、XML、影象等等)、整理訊息(例如加入 CSS 等),以及計算網頁的顯示方式,然後會輸出至顯示器或印
人生第一次前端開發崗面試(本人的第一篇CSDN blog)
背景:本人接觸WEB開發算是比較早,本科就接觸了,但是那會兒也就是能寫幾個簡單的頁面,然後覺得前端就是個美工。所以後面就斷了, 後面本人就開始著手做php相關開發工作。但前端已經今非昔比,各種各樣強大的js庫以及框架可供我們不同的選擇,也早已不再是09年那會兒人人喊打的狗皮
Web前端開發學習筆記 (一)
最近簡單地學習了一些網頁(HTML5 + CSS3 + JS)的基本知識,做一個簡單的學習筆記,下面進入正題: 一、程式設計軟體 編寫網頁的軟體有很多,例如專業級的Microsoft FrontPage、Dreamweaver,還有普通的文字編輯器Sub
(推介)github上前端開發面試題(上)
前端開發知識點: HTML&CSS: 對Web標準的理解、瀏覽器核心差異、相容性、hack、CSS基本功:佈局、盒子模型、選擇器優先順序、 HTML5、CSS3、Flexbox JavaScript: 資料型別、運算、物件、Function、繼承、閉包、作用域、原
Web前端開發大系概覽 (前端開發技術棧)
前言 網際網路建立50多年了,網站開發技術日新月異,但web前端始終離不開瀏覽器,最終還是HTML+JavaScript+CSS這3個核心,圍繞這3個核心而開發出來大量技術框架/解決方案。 我從2000年初開始做網站開發,使用的技術不斷迭代,一些消失了,更多的出現了。 爆棧三部曲 問題
WEB前端開發最佳實踐(4)
加快JS檔案載入速度 最有效的減少初始載入的檔案體積和載入次數 延遲載入:避免程式碼載入和執行過程阻止頁面的解析 儘量把js放在body的底部 使用成熟的載入框架HeadJS,RequireJS,L
FineUIMvc新特性速遞(大間距模式,隱藏菜單垂直滾動條)
android 密集恐懼癥 在線 網站 先來 即將發布的 FineUIMvc 新版本會引入兩個重要的特性,用來提升用戶體驗,現在就來先睹為快吧:大間距模式我們已經支持的顯示模式有:緊湊模式,普通模式,大字體模式。緊湊模式: 普通模式: 大字體模式(一般適用於移動端顯示,iOS,Androi
Android開發之AudioManager(音頻管理器)具體解釋
應該 數量 service eth out 開發 要求 type 路由 AudioManager簡單介紹: AudioManager類提供了訪問音量和振鈴器mode控制。使用Context.getSystemService(Context.AUDIO_SERVICE)
用vue開發一個app(2,main.js)
.html 第一次用 courier ace 第一次 router -s 提示 新建 昨天跟著vue的官網搭建了vue的一個腳手架,我也是第一次用VUE一切都在摸索階段。 今天試著看下裏面腳手架裏面有點什麽東西 先看看main.js
2017年最權威的1000集大型web前端視頻教程(愛創課堂出品)文後附錄視頻下載鏈接
前端 前端學習 前端入門 2017年最新愛創課堂前端開發課程介紹愛創課堂Web前端開發工程師培訓-價值1萬8課程資料持續更新中,第一時間領取請加QQ2079576908Web前端開發工程師,主要職責是利用HTML、XHTML、CSS、JAVAScript、FLASH等各種Web前端技術進行客戶端
android mvp高速開發框架介紹(dileber的簡單介紹)
activity 數據 -c pos androi mod family 基於 ebe 今天我為大家介紹一款android mvp框架:dileber(https://github.com/dileber/dileber.git) 官方交流qq群:171443
Windows10 使用Virtual Box一啟動虛擬機就藍屏(錯誤代碼SYSTEM_SERVICE_EXCEPTION)解決方案
電腦 str sso csdn term win window end pre 原文:Windows10 使用Virtual Box一啟動虛擬機就藍屏(錯誤代碼SYSTEM_SERVICE_EXCEPTION)解決方案 一打開虛擬機電腦就立馬藍屏重啟,新建