繼上一篇：一步一步構建手機WebApp開發——環境搭建篇過后，我相信很多朋友都想看看實戰案例，這一次的教程是頁面布局篇，先上圖：
如上圖所示，此篇教程便是教初學者如何快速布局這樣的頁面。廢話少說，直接上代碼
注意：此教程是接上一篇教程，也就是所有的內容是直接從body開始寫，當然，也會貼出所有代碼給大家。
第一步：框架的布局及幻燈片的布局（Html)
① 如上圖所示，我們應該准備以下容器，方便填充內容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!--頁面容器-->
<
div
class="page-container min-height">
<!--頭部-->
<
div
id="head">
</
div
>
<!--幻燈片-->
<
div
id="banner" class="position-relative">
</
div
>
<!--主體-->
<
div
id="main">
<!--方塊菜單-->
<
div
class="menu min-height">
</
div
>
<!--描述-->
<
div
class="copyright clear">
</
div
>
</
div
>
<!--頁腳-->
<
div
id="footer" class="position-fixed">
</
div
>
</
div
>
|
② 由於此模板沒有頭部，所有直接從幻燈片div開始寫起，准備三張圖片，然后通過<ul>，<li>布局
|
1
2
3
4
5
6
7
8
|
<!--幻燈片-->
<
div
id="banner" class="position-relative">
<
ul
>
<
li
><
a
href="#" title=""><
img
src="imgs/banner1.jpg" alt="" title="" /></
a
></
li
>
<
li
><
a
href="#" title=""><
img
src="imgs/banner2.jpg" alt="" title="" /></
a
></
li
>
<
li
><
a
href="#" title=""><
img
src="imgs/banner3.jpg" alt="" title="" /></
a
></
li
>
</
ul
>
</
div
>
|
第二步：框架的布局樣式及幻燈片的布局樣式（Css)
① 公共庫樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/* 禁用iPhone中Safari的字號自動調整 */
html { -webkit-text-size-adjust:
none
; }
/* 設置HTML5元素為塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display
:
block
; }
/* 設置圖片視頻等自適應調整 */
img {
max-width
:
100%
;
height
:
auto
;
width
:
auto
\
9
;
/* ie8 */
}
.video
embed
, .video object, .video iframe {
width
:
100%
;
height
:
auto
; }
/* 公共庫 */
a {
text-decoration
:
none
;
cursor
:
pointer
; }
li {
list-style
:
none
; }
a {
text-decoration
:
none
;
color
:
#555756
; }
a:hover {
color
:
#141414
;
text-decoration
:
none
; }
a img {
border
:
none
; }
a > img {
vertical-align
:
bottom
; }
.min-height {
min-height
:
0
;
height
:
auto
;
_height
:
0
;
overflow
:
hidden
;
_overflow
:
visible
; }
.float-
left
{
float
:
left
; }
.float-
right
{
float
:
right
; }
.clear {
clear
:
both
; }
.position-
absolute
{
position
:
absolute
; }
.position-
relative
{
position
:
relative
; }
.position-
fixed
{
position
:
fixed
; }
.overflow-
hidden
{
overflow
:
hidden
; }
.display-inline-
block
{
display
: inline-
block
; }
|
② 頁面容器及幻燈片樣式
|
1
2
3
4
5
6
7
8
9
|
/* 頁面主代碼 */
body {
font
:
14px
/
22px
"Georgia"
,
Helvetica
,
Arial
,
sans-serif
;
background
:
#fff
;
color
:
#595959
; overflow-y:
scroll
; overflow-x:
hidden
; *overflow-y:
auto
!important
; }
/*設置容器最大寬度為640*/
.page-container {
max-width
:
640px
;
margin
:
0
auto
;
padding-bottom
:
60px
; }
/*幻燈片*/
#banner {
width
:
100%
;
overflow
:
hidden
;
position
:
relative
; }
#banner ul li {
display
:
none
;
float
:
left
; }
#banner ul li:first-of-type {
display
:
block
; }
|
上面一步如下圖所示：
第三步：創建公共腳本類庫，並拓展Jquery對象實現簡單插件並初步調用（common.js)
① 添加Jquery拓展幻燈片插件，不懂Jquery插件的，請移步：Jquery插件精品教程，這是我認為最好的教程
|
1
2
3
4
5
6
|
//頁面特效，這里用到jquery最簡單的插件寫法
$.extend({
banner:
function
(ele) {
}
});
|
② 在前台頁面引用（common.js),並調用幻燈片插件
|
1
2
3
4
5
6
|
<
script
type="text/javascript" src="scripts/common.js"></
script
>
<
script
type="text/javascript">
$(function () {
$.banner("#banner");
})
</
script
>
|
第四步：實現幻燈片banner的核心方法
① 獲取幻燈片的個數
|
1
|
var
imgSize = $(ele).find(
"img"
).size();
|
② 獲取幻燈片的寬度和寬度
|
1
2
|
var
imgWidth = $(ele).width();
var
imgHeight = $(ele).height();
|
③ 設置 <ul> 標簽的寬度為：個數*單個寬度，及阻止li繼承父類，這樣為了讓<li>有足夠的空間浮動成行排列，並顯示所有幻燈片
|
1
|
$(ele).children(
"ul"
).width(imgSize * imgWidth).children(
"li"
).width(imgWidth).show();
|
④ 根據幻燈片個數生成按鈕
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// 4.0.1 創建按鈕容器並添加樣式
$btn = $(
"<div class='btn position-absolute'></div>"
);
$btn.css({
"z-index"
:
"100"
,
"width"
:
"100%"
,
"height"
:
"20px"
,
"left"
:
"0"
,
"top"
: (imgHeight - 20) +
"px"
,
"line-height"
:
"20px"
,
"text-align"
:
"center"
});
// 4.0.2 生成按鈕，特別聲明：以下的樣式大可在css文件中定義，在這里我就不定義了。
for
(
var
i = 0; i < imgSize; i++) {
$dot = $(
"<span class='dot display-inline-block'></span>"
);
$dot.css({
"width"
:
"12px"
,
"height"
:
"12px"
,
"border-radius"
:
"50%"
,
"background"
:
"#fff"
,
"margin-right"
:
"8px"
});
$btn.append($dot);
}
// 4.0.3 設置第一個選中，選中樣式為active，
$btn.find(
"span:eq(0)"
).attr(
"id"
,
"active"
).css({
"background"
:
"#f00"
});
// 4.0.4 添加到容器中
$(ele).append($btn);
|
* 定義標識變量，判斷幻燈片是否完整執行動畫
|
1
|
var
isEnd =
true
;
// 定義標識，判斷是否滑動完成
|
⑤ 為生成的按鈕綁定點擊事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$btn.children(
"span"
).on({
click:
function
() {
// 5.0.1 獲取點擊的索引
var
index = $(
this
).index();
// 5.0.2 為點擊的按鈕添加選中樣式，並滑動幻燈片
$(
this
).attr(
"id"
,
"active"
).css({
"background"
:
"#f00"
}).siblings(
"span"
).removeAttr(
"id"
).css({
"background"
:
"#fff"
});
// 5.0.3 滑動幻燈片
if
(isEnd ==
true
) {
isEnd ==
false
;
$(ele).children(
"ul"
).animate({
marginLeft: -index * imgWidth
}, 300,
function
() {
isEnd =
true
;
});
}
}
});
|
⑥ 為幻燈片添加觸摸事件，前台必須引用hammer.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 6.0.1 創建一個新的hammer對象並且在初始化時指定要處理的dom元素
var
hammertime =
new
Hammer($(ele)[0]);
hammertime.get(
'swipe'
).set({ direction: Hammer.DIRECTION_ALL });
// 向左滑動
hammertime.on(
"swipeleft"
,
function
(e) {
// 6.0.2 判斷當前幻燈片的索引
var
currentIndex = $btn.find(
"span#active"
).index();
// 6.0.3 判斷是否是最后一張
if
(currentIndex + 1 < imgSize) {
// 主動點擊按鈕
$btn.children(
"span"
).eq(currentIndex + 1).click();
}
});
// 向右滑動
hammertime.on(
"swiperight"
,
function
(e) {
// 6.0.2 判斷當前幻燈片的索引
var
currentIndex = $btn.find(
"span#active"
).index();
// 6.0.4 判斷是否是第一張
if
(currentIndex > 0) {
$btn.children(
"span"
).eq(currentIndex - 1).click();
}
});
|
經過上面6個小節，一個幻燈片滑動就弄好了，支持觸屏滑動，完整代碼為：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
//頁面特效，這里用到jquery最簡單的插件寫法
$.extend({
/******************************* 手機幻燈片特效開始***************************/
banner:
function
(ele) {
// 1.0 獲取幻燈片的個數
var
imgSize = $(ele).find(
"img"
).size();
// 2.0 獲取幻燈片的寬度和寬度
var
imgWidth = $(ele).width();
var
imgHeight = $(ele).height();
// 3.0 設置 <ul> 標簽的寬度為：個數*單個寬度，及阻止li繼承父類，這樣為了讓<li>有足夠的空間浮動成行排列，並顯示所有幻燈片
$(ele).children(
"ul"
).width(imgSize * imgWidth).children(
"li"
).width(imgWidth).show();
// 4.0 根據幻燈片個數生成按鈕
// 4.0.1 創建按鈕容器並添加樣式
$btn = $(
"<div class='btn position-absolute'></div>"
);
$btn.css({
"z-index"
:
"100"
,
"width"
:
"100%"
,
"height"
:
"20px"
,
"left"
:
"0"
,
"top"
: (imgHeight - 20) +
"px"
,
"line-height"
:
"20px"
,
"text-align"
:
"center"
});
// 4.0.2 生成按鈕，特別聲明：以下的樣式大可在css文件中定義，在這里我就不定義了。
for
(
var
i = 0; i < imgSize; i++) {
$dot = $(
"<span class='dot display-inline-block'></span>"
);
$dot.css({
"width"
:
"12px"
,
"height"
:
"12px"
,
"border-radius"
:
"50%"
,
"background"
:
"#fff"
,
"margin-right"
:
"8px"
});
$btn.append($dot);
}
// 4.0.3 設置第一個選中，選中樣式為active，
$btn.find(
"span:eq(0)"
).attr(
"id"
,
"active"
).css({
"background"
:
"#f00"
});
// 4.0.4 添加到容器中
$(ele).append($btn);
var
isEnd =
true
;
// 定義標識，判斷是否滑動完成
// 5.0 為生成的按鈕綁定點擊事件
$btn.children(
"span"
).on({
click:
function
() {
// 5.0.1 獲取點擊的索引
var
index = $(
this
).index();
// 5.0.2 為點擊的按鈕添加選中樣式，並滑動幻燈片
$(
this
).attr(
"id"
,
"active"
).css({
"background"
:
"#f00"
}).siblings(
"span"
).removeAttr(
"id"
).css({
"background"
:
"#fff"
});
// 5.0.3 滑動幻燈片
if
(isEnd ==
true
) {
isEnd ==
false
;
$(ele).children(
"ul"
).animate({
marginLeft: -index * imgWidth
}, 300,
function
() {
isEnd =
true
;
});
}
}
});
// 6.0 為幻燈片添加觸摸事件，前台必須引用hammer.js
// 6.0.1 創建一個新的hammer對象並且在初始化時指定要處理的dom元素
var
hammertime =
new
Hammer($(ele)[0]);
hammertime.get(
'swipe'
).set({ direction: Hammer.DIRECTION_ALL });
// 向左滑動
hammertime.on(
"swipeleft"
,
function
(e) {
// 6.0.2 判斷當前幻燈片的索引
var
currentIndex = $btn.find(
"span#active"
).index();
// 6.0.3 判斷是否是最后一張
if
(currentIndex + 1 < imgSize) {
// 主動點擊按鈕
$btn.children(
"span"
).eq(currentIndex + 1).click();
}
});
// 向右滑動
hammertime.on(
"swiperight"
,
function
(e) {
// 6.0.2 判斷當前幻燈片的索引
var
currentIndex = $btn.find(
"span#active"
).index();
// 6.0.4 判斷是否是第一張
if
(currentIndex > 0) {
$btn.children(
"span"
).eq(currentIndex - 1).click();
}
});
/******************************* 手機幻燈片特效結束***************************/
/*
* 注：完善版應該還有自動滑動，和監控瀏覽器時間，在這里我就不詳細寫了，除非有朋友要求
*/
}
});
|
第五步：實現方塊按鈕菜單的布局（Html）
|
1
2
3
4
5
6
7
8
9
10
11
|
<!--方塊菜單-->
<
div
class="menu min-height">
<
a
href="" title="關於我們"><
span
>關於我們</
span
></
a
>
<
a
href="" title="設計團隊"><
span
>設計團隊</
span
></
a
>
<
a
href="" title="經典案例"><
span
>經典案例</
span
></
a
>
<
a
href="" title="服務保障"><
span
>服務保障</
span
></
a
>
<
a
href="" title="優惠活動"><
span
>優惠活動</
span
></
a
>
<
a
href="" title="裝飾課堂"><
span
>裝飾課堂</
span
></
a
>
<
a
href="" title="會議中心"><
span
>會議中心</
span
></
a
>
<
a
href="" title="聯系我們"><
span
>聯系我們</
span
></
a
>
</
div
>
|
第六步：實現方塊按鈕菜單的布局樣式（Css）
① 四列布局算法：讓所有方塊的margin-left為：1.5%，這樣就有1.5%*5=7.5%個縫隙，那么每一個方塊的寬度為： 23.125%，代碼如下：
|
1
2
3
|
/* 方塊菜單 */
.menu a {
display
:
block
;
float
:
left
;
width
:
23.125%
;
height
:
80px
;
margin
:
5px
0
0
1.5%
;
color
:
#fff
; }
.menu a span {
padding
:
5px
; }
|
② 逐步為各個方塊設置樣式及特殊樣式，首先需要掌握CSS3 選擇器：nth-child，意思就是獲取第幾個，CSS3選擇器教程：請移步：CSS3選擇器
|
1
2
3
4
5
6
7
8
9
|
/*由於第一個垮了兩個方塊，也就是 23.125%*2+1.5%=47.75%，其中1.5%是一個縫隙（margin-left)*/
.menu a:nth-child(
1
) {
background
:
#666666
;
width
:
47.75%
;
height
:
165px
; }
.menu a:nth-child(
2
) {
background
:
#1673d2
; }
.menu a:nth-child(
3
) {
background
:
#008a00
; }
.menu a:nth-child(
4
) {
background
:
#8d0196
;
width
:
47.75%
; }
.menu a:nth-child(
5
) {
background
:
#59d5e6
; }
.menu a:nth-child(
6
) {
background
:
#fd5c04
; }
.menu a:nth-child(
7
) {
background
:
#e86eb2
; }
.menu a:nth-child(
8
) {
background
:
#666666
; }
|
經過上面兩步，方塊菜單制作完成，如下圖所示：
第七步：添加版權描述（比較簡單，Html和CSS一起寫）
Html
|
1
2
3
4
|
<!--描述-->
<
div
class="copyright clear">
版權所有：新生帝
</
div
>
|
Css
|
1
2
|
/* 版權 */
.copyright {
padding
:
8px
;
text-align
:
center
;
color
:
#444
; }
|
第八步：添加底部固定菜單
Html
|
1
2
3
4
5
6
7
8
|
<!--頁腳-->
<
div
id="footer" class="position-fixed">
<
ul
>
<
li
><
a
href="" title="">網站地圖</
a
></
li
>
<
li
><
a
href="" title="">關於我們</
a
></
li
>
<
li
><
a
href="" title="">聯系我們</
a
></
li
>
</
ul
>
</
div
>
|
Css
|
1
2
3
4
5
|
/* 底部 */
#footer {
bottom
:
0
;
height
:
40px
;
width
:
100%
;
z-index
:
101
;
background
:
#333333
; }
#footer ul li {
width
:
33%
;
height
:
40px
;
margin
:
0
0
0
0.25%
;
float
:
left
;
line-height
:
40px
;
text-align
:
center
; }
#footer ul li a {
color
:
#fff
; }
#footer ul li {
background
:
#ccc
; }
|
經過上面七個步驟，一個完整的頁面布局制作完畢！！！！
所有代碼如下：
Index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!
DOCTYPE
html>
<
head
>
<
meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--禁止瀏覽器縮放-->
<
meta
name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<
meta
content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" />
<!--清除瀏覽器緩存-->
<
meta
http-equiv="pragma" content="no-cache">
<
meta
http-equiv="Cache-Control" content="no-cache, must-revalidate">
<
meta
http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<!--iPhone 手機上設置手機號碼不被顯示為撥號鏈接）-->
<
meta
content="telephone=no, address=no" name="format-detection" />
<!--IOS私有屬性，可以添加到主屏幕-->
<
meta
name="apple-mobile-web-app-capable" content="yes" />
<!--屏幕頂部條的顏色-->
<
meta
name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<
title
>SaveMoney</
title
>
<!-- 重置樣式 -->
<
link
type="text/css" href="css/reset.css" rel="stylesheet" />
<!-- 主樣式 -->
<
link
type="text/css" href="css/common.css" rel="stylesheet" />
<!-- Jquery庫 -->
<
script
type="text/javascript" src="scripts/jquery-1.11.1.min.js"></
script
>
<!-- 手機觸摸插件 -->
<
script
type="text/javascript" src="scripts/hammer.js"></
script
>
<!--公共腳本庫-->
<
script
type="text/javascript" src="scripts/common.js"></
script
>
<!--讓IE8，IE9，支持Html5和Css3-->
<!--[if lte IE 8]>
<script src="scripts/selectivizr.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/css3-mediaqueries.js"></script>
<script src="scripts/html5shiv.js"></script>
<![endif]-->
</
head
>
<
body
>
<!--頁面容器-->
<
div
class="page-container min-height">
<!--頭部-->
<
div
id="head"></
div
>
<!--幻燈片-->
<
div
id="banner" class="position-relative">
<
ul
>
<
li
><
a
href="#" title=""><
img
src="imgs/banner1.jpg" alt="" title="" /></
a
></
li
>
<
li
><
a
href="#" title=""><
img
src="imgs/banner2.jpg" alt="" title="" /></
a
></
li
>
<
li
><
a
href="#" title=""><
img
src="imgs/banner3.jpg" alt="" title="" /></
a
></
li
>
</
ul
>
</
div
>
<!--主體-->
<
div
id="main">
<!--方塊菜單-->
<
div
class="menu min-height">
<
a
href="" title="關於我們"><
span
>關於我們</
span
></
a
>
<
a
href="" title="設計團隊"><
span
>設計團隊</
span
></
a
>
<
a
href="" title="經典案例"><
span
>經典案例</
span
></
a
>
<
a
href="" title="服務保障"><
span
>服務保障</
span
></
a
>
<
a
href="" title="優惠活動"><
span
>優惠活動</
span
></
a
>
<
a
href="" title="裝飾課堂"><
span
>裝飾課堂</
span
></
a
>
<
a
href="" title="會議中心"><
span
>會議中心</
span
></
a
>
<
a
href="" title="聯系我們"><
span
>聯系我們</
span
></
a
>
</
div
>
<!--描述-->
<
div
class="copyright clear">
版權所有：新生帝
</
div
>
</
div
>
<!--頁腳-->
<
div
id="footer" class="position-fixed">
<
ul
>
<
li
><
a
href="" title="">網站地圖</
a
></
li
>
<
li
><
a
href="" title="">關於我們</
a
></
li
>
<
li
><
a
href="" title="">聯系我們</
a
></
li
>
</
ul
>
</
div
>
</
div
>
<
script
type="text/javascript">
$(function () {
$.banner("#banner");
})
</
script
>
</
body
>
</
html
>
|
Common.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
/* 禁用iPhone中Safari的字號自動調整 */
html { -webkit-text-size-adjust:
none
; }
/* 設置HTML5元素為塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display
:
block
; }
/* 設置圖片視頻等自適應調整 */
img {
max-width
:
100%
;
height
:
auto
;
width
:
auto
\
9
;
/* ie8 */
}
.video
embed
, .video object, .video iframe {
width
:
100%
;
height
:
auto
; }
/* 公共庫 */
a {
text-decoration
:
none
;
cursor
:
pointer
; }
li {
list-style
:
none
; }
a {
text-decoration
:
none
;
color
:
#555756
; }
a:hover {
color
:
#141414
;
text-decoration
:
none
; }
a img {
border
:
none
; }
a > img {
vertical-align
:
bottom
; }
.min-height {
min-height
:
0
;
height
:
auto
;
_height
:
0
;
overflow
:
hidden
;
_overflow
:
visible
; }
.float-
left
{
float
:
left
; }
.float-
right
{
float
:
right
; }
.clear {
clear
:
both
; }
.position-
absolute
{
position
:
absolute
; }
.position-
relative
{
position
:
relative
; }
.position-
fixed
{
position
:
fixed
; }
.overflow-
hidden
{
overflow
:
hidden
; }
.display-inline-
block
{
display
: inline-
block
; }
/* 頁面主代碼 */
body {
font
:
14px
/
22px
"Georgia"
,
Helvetica
,
Arial
,
sans-serif
;
background
:
#fff
;
color
:
#595959
; overflow-y:
scroll
; overflow-x:
hidden
; *overflow-y:
auto
!important
; }
/*設置容器最大寬度為640*/
.page-container {
max-width
:
640px
;
margin
:
0
auto
;
padding-bottom
:
60px
; }
/*幻燈片*/
#banner {
width
:
100%
;
overflow
:
hidden
;
position
:
relative
; }
#banner ul li {
display
:
none
;
float
:
left
; }
#banner ul li:first-of-type {
display
:
block
; }
/* 方塊菜單 */
.menu a {
display
:
block
;
float
:
left
;
width
:
23.125%
;
height
:
80px
;
margin
:
5px
0
0
1.5%
;
color
:
#fff
; }
.menu a span {
padding
:
5px
; }
/*由於第一個垮了兩個方塊，也就是 23.125%*2+1.5%=47.75%，其中1.5%是一個縫隙（margin-left)*/
.menu a:nth-child(
1
) {
background
:
#666666
;
width
:
47.75%
;
height
:
165px
; }
.menu a:nth-child(
2
) {
background
:
#1673d2
; }
.menu a:nth-child(
3
) {
background
:
#008a00
; }
.menu a:nth-child(
4
) {
background
:
#8d0196
;
width
:
47.75%
; }
.menu a:nth-child(
5
) {
background
:
#59d5e6
; }
.menu a:nth-child(
6
) {
background
:
#fd5c04
; }
.menu a:nth-child(
7
) {
background
:
#e86eb2
; }
.menu a:nth-child(
8
) {
background
:
#666666
; }
/* 版權 */
.copyright {
padding
:
8px
;
text-align
:
center
;
color
:
#444
; }
/* 底部 */
#footer {
bottom
:
0
;
height
:
40px
;
width
:
100%
;
z-index
:
101
;
background
:
#333333
; }
#footer ul li {
width
:
33%
;
height
:
40px
;
margin
:
0
0
0
0.25%
;
float
:
left
;
line-height
:
40px
;
text-align
:
center
; }
#footer ul li a {
color
:
#fff
; }
#footer ul li {
background
:
#ccc
; }
/*響應式媒體查詢，*/
/*
* -----------------------------------------
* 320 ~ 480
* -----------------------------------------
*/
@media only
screen
and (
min-width
:
320px
) and (
max-width
:
480px
) {
}
/*
* -----------------------------------------
* 321 ~ 寬大於321的設備
* -----------------------------------------
*/
@media only
screen
and (
min-width
:
321px
) {
}
/*
* -----------------------------------------
* ~ 320 寬小於320的設備
* -----------------------------------------
*/
@media only
screen
and (
max-width
:
320px
) {
}
/*
* -----------------------------------------
* ~ 480 寬小於480的設備
* -----------------------------------------
*/
@media only
screen
and (
max-width
:
480px
) {
}
/* medium screens (excludes iPad & iPhone) */
/*
* -----------------------------------------
* 481 ~ 767 寬大於480且小於767的iPad和iPhone
* -----------------------------------------
*/
@media only
screen
and (
min-width
:
481px
) and (
max-width
:
767px
) {
}
/* ipads (portrait and landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 寬大於480且小於1024的iPad和iPhone
* -----------------------------------------
*/
@media only
screen
and (min-device-
width
:
768px
) and (max-device-
width
:
1024px
) {
}
/* ipads (landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 寬大於480且小於1024的iPad和iPhone
* -----------------------------------------
*/
@media only
screen
and (min-device-
width
:
768px
) and (max-device-
width
:
1024px
) and (orientation:
landscape
) {
}
/* ipads (portrait) */
/*
* -----------------------------------------
* 768 ~ 1024 寬大於480且小於1024的iPad和iPhone
* -----------------------------------------
*/
@media only
screen
and (min-device-
width
:
768px
) and (max-device-
width
:
1024px
) and (orientation:
portrait
) {
}
/*
* -----------------------------------------
* 1444 ~ 1824 寬大於1444且小於1824的設備
* -----------------------------------------
*/
@media only
screen
and (
min-width
:
1444px
) and (
max-width
:
1824px
) {
}
/*
* -----------------------------------------
* 1824 ~ 寬大於1824的設備
* -----------------------------------------
*/
@media only
screen
and (
min-width
:
1824px
) {
}
/*
* -----------------------------------------
* 2224 ~ 寬大於2224的設備
* -----------------------------------------
*/
@media only
screen
and (
min-width
:
2224px
) {
}
/* iphone 4 and high pixel ratio (1.5+) devices */
/*
* -----------------------------------------
* iphone4 ~
* -----------------------------------------
*/
@media only
screen
and (-webkit-min-device-pixel-ratio :
1.5
), only
screen
and (min-device-pixel-ratio :
1.5
) {
}
/* iphone 4 and higher pixel ratio (2+) devices (retina) */
@media only
screen
and (-webkit-min-device-pixel-ratio:
2
), only
screen
and (min-device-pixel-ratio:
2
) {
}
|
Common.Js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
//頁面特效，這里用到jquery最簡單的插件寫法
$.extend({
/******************************* 手機幻燈片特效開始***************************/
banner:
function
(ele) {
// 1.0 獲取幻燈片的個數
var
imgSize = $(ele).find(
"img"
).size();
// 2.0 獲取幻燈片的寬度和寬度
var
imgWidth = $(ele).width();
var
imgHeight = $(ele).height();
// 3.0 設置 <ul> 標簽的寬度為：個數*單個寬度，及阻止li繼承父類，這樣為了讓<li>有足夠的空間浮動成行排列，並顯示所有幻燈片
$(ele).children(
"ul"
).width(imgSize * imgWidth).children(
"li"
).width(imgWidth).show();
// 4.0 根據幻燈片個數生成按鈕
// 4.0.1 創建按鈕容器並添加樣式
$btn = $(
"<div class='btn position-absolute'></div>"
);
$btn.css({
"z-index"
:
"100"
,
"width"
:
"100%"
,
"height"
:
"20px"
,
"left"
:
"0"
,
"top"
: (imgHeight - 20) +
"px"
,
"line-height"
:
"20px"
,
"text-align"
:
"center"
});
// 4.0.2 生成按鈕，特別聲明：以下的樣式大可在css文件中定義，在這里我就不定義了。
for
(
var
i = 0; i < imgSize; i++) {
$dot = $(
"<span class='dot display-inline-block'></span>"
);
$dot.css({
"width"
:
"12px"
,
"height"
:
"12px"
,
"border-radius"
:
"50%"
,
"background"
:
"#fff"
,
"margin-right"
:
"8px"
});
$btn.append($dot);
}
// 4.0.3 設置第一個選中，選中樣式為active，
$btn.find(
"span:eq(0)"
).attr(
"id"
,
"active"
).css({
"background"
:
"#f00"
});
// 4.0.4 添加到容器中
$(ele).append($btn);
var
isEnd =
true
;
// 定義標識，判斷是否滑動完成
// 5.0 為生成的按鈕綁定點擊事件
$btn.children(
"span"
).on({
click:
function
() {
// 5.0.1 獲取點擊的索引
var
index = $(
this
).index();
// 5.0.2 為點擊的按鈕添加選中樣式，並滑動幻燈片
$(
this
).attr(
"id"
,
"active"
).css({
"background"
:
"#f00"
}).siblings(
"span"
).removeAttr(
"id"
).css({
"background"
:
"#fff"
});
// 5.0.3 滑動幻燈片
if
(isEnd ==
true
) {
isEnd ==
false
;
$(ele).children(
"ul"
).animate({
marginLeft: -index * imgWidth
}, 300,
function
() {
isEnd =
true
;
});
}
}
});
// 6.0 為幻燈片添加觸摸事件，前台必須引用hammer.js
// 6.0.1 創建一個新的hammer對象並且在初始化時指定要處理的dom元素
var
hammertime =
new
Hammer($(ele)[0]);
hammertime.get(
'swipe'
).set({ direction: Hammer.DIRECTION_ALL });
// 此代碼會導致滾動條不能滑動，請注釋后再使用
// 向左滑動
hammertime.on(
"swipeleft"
,
function
(e) {
// 6.0.2 判斷當前幻燈片的索引
var
currentIndex = $btn.find(
"span#active"
).index();
// 6.0.3 判斷是否是最后一張
if
(currentIndex + 1 < imgSize) {
// 主動點擊按鈕
$btn.children(
"span"
).eq(currentIndex + 1).click();
}
});
// 向右滑動
hammertime.on(
"swiperight"
,
function
(e) {
// 6.0.2 判斷當前幻燈片的索引
var
currentIndex = $btn.find(
"span#active"
).index();
// 6.0.4 判斷是否是第一張
if
(currentIndex > 0) {
$btn.children(
"span"
).eq(currentIndex - 1).click();
}
});
/******************************* 手機幻燈片特效結束***************************/
/*
* 注：完善版應該還有自動滑動，和監控瀏覽器時間，在這里我就不詳細寫了，除非有朋友要求
*/
}
});
|
Demo:下載 http://pan.baidu.com/s/1sj6wlC5
補充說明：hammer.js會阻止瀏覽器滾動條滑動，也就是默認事件，可以注釋觸摸的代碼：
|
1
|
//hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
|
注釋這一行就不會出現不能滑動滾動條了。因為hammer.js默認不啟用上下滑動事件，而啟用上下滑動事件會阻止瀏覽器默認事件，當然，此教程沒有用到上下滑動，所以注釋這行代碼就可以了。
hammer.js開發教程：http://www.cnblogs.com/iamlilinfeng/p/4239957.html
hammer.js 中文翻譯官方文檔：http://www.tuicool.com/articles/VNRjym7
jquery插件精品教程，我認為寫的最好的：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
下一篇實戰內容截圖：手把手，一步一步構建WebApp——完整項目篇
