Change History
Message: [講義] jQuery動態換頁效果
Changed By: JinJin
Change Date: May 11, 2017 09:25AM
[講義] jQuery動態換頁效果
Change Date: May 11, 2017 09:25AM
[講義] jQuery動態換頁效果
[講義] jQuery動態換頁效果
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例
<h3>完整index.html</h3>
<xmp><html>
<head>
<title>2NE1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
list-style-type: none;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例
<h3>完整index.html</h3>
<xmp><html>
<head>
<title>2NE1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
list-style-type: none;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
Changed By: JinJin
Change Date: May 03, 2017 11:44AM
[講義] jQuery動態換頁效果
Change Date: May 03, 2017 11:44AM
[講義] jQuery動態換頁效果
[講義] jQuery動態換頁效果
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例
<h3>完整index.html</h3>
<xmp><html>
<head>
<title>2NE1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
:nth-child(3):after,
one;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例
<h3>完整index.html</h3>
<xmp><html>
<head>
<title>2NE1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
:nth-child(3):after,
one;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
Changed By: JinJin
Change Date: April 27, 2017 12:20AM
[講義] jQuery動態換頁效果
Change Date: April 27, 2017 12:20AM
[講義] jQuery動態換頁效果
[講義] jQuery動態換頁效果
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
pt>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hs://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
m/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</html>
</xmp>
mp>
tml>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
one;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
pt>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hs://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
m/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</html>
</xmp>
mp>
tml>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
one;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
Changed By: JinJin
Change Date: April 26, 2017 10:54PM
[講義] jQuery動態換頁效果
Change Date: April 26, 2017 10:54PM
[講義] jQuery動態換頁效果
[講義] jQuery動態換頁效果
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
pt>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hm/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</html>
</xmp>
tml>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
one;
}
#header li a{
paddi }
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
auto;
px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
pt>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hm/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</html>
</xmp>
tml>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
one;
}
#header li a{
paddi }
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
auto;
px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
Changed By: JinJin
Change Date: May 10, 2016 11:21AM
[講義] jQuery動態換頁效果
Change Date: May 10, 2016 11:21AM
[講義] jQuery動態換頁效果
[講義] jQuery動態換頁效果
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
pt>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<scrip <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
t type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hm/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</html>
</xmp>
tml>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
one;
}
#header li a{
paddi }
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
pt>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<scrip <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
t type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hm/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 03 PAGE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</html>
</xmp>
tml>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
one;
}
#header li a{
paddi }
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
Changed By: JinJin
Change Date: May 10, 2016 11:19AM
[講義] jQuery動態換頁效果
Change Date: May 10, 2016 11:19AM
[講義] jQuery動態換頁效果
[講義] jQuery動態換頁效果
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
pt>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<scrip <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
t type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hm/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {
on () {
GE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</html>
</xmp>
tml>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
one;
}
#header li a{
paddi }
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//heigh<h3>js/jquery.scrollTo-1.4.2-min.js</h3>
<xmp>/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 5/25/2009
* @author Ariel Flesler
* @version 1.4.2
*
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
*/
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
om/forum/read.php?804,76063
lute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
<h2> jQuery參考網站</h2>
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
<h2> jQuery動態換頁效果範例</h2>
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
<h2>製作步驟</h2>
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
<h3>步驟一佈景設計</h3>
單欄網頁，單純的header,content區塊
<b>step1.html</b>
<xmp><!DOCTYPE html>
<html>
<head>
<title>作業七</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css">
pt>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
</head>
<body>
<div id="header"><!--HEADER-->
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<scrip <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
t type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
section1" class="box"><!--首頁 -->
<div class="content">
<!--首頁內容-->
</div>
</li><!--首頁結束 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
</html></xmp>
[hr]
<b>style.css</b>
<xmp>/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(images/bg.jpg);
overflow:hidden; /* 隱藏捲軸 */
}
#header{
width:100%;
height:100px;
background:url(images/head_bg.png);
background-color: #FFFFFF;
}</xmp>
[hr]
以http://mepopedia.com/~css104-2c/hm/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> CL</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Bom</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Dara</a></li>
<li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Minzy</a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--01-->
<div class="content">
<center><img src="images/cl.jpg" width="328" height="475"></center>
</div>
</li>
<!--END OF 01 PAGE-->
<li id="section3" class="box"><!--02-->
<div class="content">
<center>
<img src="images/bom.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 02 PAGE-->
<li id="section4" class="box"><!--03-->
<div class="content">
<center>
<img src="images/dara.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {
on () {
GE-->
<li id="section5" class="box"><!--04-->
<div class="content">
<center>
<img src="images/minzy.jpg" width="328" height="475">
</center>
</div>
</li>
<!--END OF 04 PAGE-->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</html>
</xmp>
tml>
</xmp>
[hr]
<h3>完整style.css</h3>
<xmp>@charset "UTF-8";
/* CSS Document */
/* STEP 1: 佈景設計 */
body {
width: 100%;
overflow: hidden;
background-color: #000;
}
#header{
width: 100%;
height: 100px;
background-color: #FFF;
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#header li a{
padding: 25px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
one;
}
#header li a{
paddi }
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//heigh<h3>js/jquery.scrollTo-1.4.2-min.js</h3>
<xmp>/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 5/25/2009
* @author Ariel Flesler
* @version 1.4.2
*
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
*/
;(function(d){var k=d.scrollTo=function(a,i,e){d(window).scrollTo(a,i,e)};k.defaults={axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1};k.window=function(a){return d(window)._scrollable()};d.fn._scrollable=function(){return this.map(function(){var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!i)return a;var e=(a.contentWindow||a).document||a.ownerDocument||a;return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement})};d.fn.scrollTo=function(n,j,b){if(typeof j=='object'){b=j;j=0}if(typeof b=='function')b={onAfter:b};if(n=='max')n=9e9;b=d.extend({},k.defaults,b);j=j||b.speed||b.duration;b.queue=b.queue&&b.axis.length>1;if(b.queue)j/=2;b.offset=p(b.offset);b.over=p(b.over);return this._scrollable().each(function(){var q=this,r=d(q),f=n,s,g={},u=r.is('html,body');switch(typeof f){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){f=p(f);break}f=d(f,this);case'object':if(f.is||f.style)s=(f=d(f)).offset()}d.each(b.axis.split(''),function(a,i){var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);if(s){g[c]=s[h]+(u?0:l-r.offset()[h]);if(b.margin){g[c]-=parseInt(f.css('margin'+e))||0;g[c]-=parseInt(f.css('border'+e+'Width'))||0}g[c]+=b.offset[h]||0;if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}else{var o=f[h];g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);if(!a&&b.queue){if(l!=g[c])t(b.onAfterFirst);delete g[c]}});t(b.onAfter);function t(a){r.animate(g,j,b.easing,a&&function(){a.call(this,n,b)})}}).end()};k.max=function(a,i){var e=i=='x'?'Width':'Height',h='scroll'+e;if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;return Math.max(l[h],m[h])-Math.min(l[c],m[c])};function p(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
om/forum/read.php?804,76063
lute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
px 5px 0 5px;
text-align: center;
height: 40px;
width: 100px;
display: block;
font-size: 16px;
text-decoration: none;
letter-spacing: 2px;
color: #000;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 100px 0 130px;
}
#header ul li:nth-child(3):after,
#header ul li:nth-child(4):after,
#header ul li:nth-child(5):after,
#header ul li:nth-child(6):after,
#header ul li:nth-child(7):after{
display:block;
content:"";
height:42px;
margin-top:-45px ;
}
a,p {
font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
font-weight:bold;
}
#header ul li a:hover{
color: #666;
}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden; /* VERY IMPORTANT */
}
#mask {
width: 500%; height: 100%
}
.box {
width: 20%;
height: 100%;
float: left;
}
.content {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
t {
width: 1000px;
height: 600px;
top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 3em;
width: 300px;
height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}</xmp>
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063
[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
Changed By: JinJin
Change Date: May 10, 2016 03:50AM
[講義] jQuery動態換頁效果
Change Date: May 10, 2016 03:50AM
[講義] jQuery動態換頁效果
Original Message
作者: JinJinDate: May 10, 2016 03:43AM
[講義] jQuery動態換頁效果
[講義] jQuery動態換頁效果
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
單欄網頁，單純的header,content區塊
step1.html
<!DOCTYPE html><br />
<html><br />
<head><br />
<title>作業七</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><br />
<link rel="stylesheet" type="text/css" href="style.css"><br />
pt><br />
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */ <br />
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */ <br />
<br />
</head><br />
<br />
<body><br />
<div id="header"><!--HEADER--><br />
</div><!--HEADER結束--><br />
<br />
<div id="wrapper"><br />
<br />
<ul id="mask"><br />
<li id=" <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><br />
<scrip <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script><br />
t type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> /* 內部檔案 */ <br />
<script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> /* 外連檔案 */ <br />
section1" class="box"><!--首頁 --><br />
<div class="content"><br />
<!--首頁內容--><br />
</div><br />
</li><!--首頁結束 --><br />
</ul><!-- end mask --><br />
<br />
</div><!-- end wrapper --><br />
<br />
</body><br />
<br />
</html>
[hr]
style.css
/* STEP 1: 佈景設計 */<br />
body {<br />
width:100%;<br />
background-image:url(images/bg.jpg);<br />
overflow:hidden; /* 隱藏捲軸 */<br />
}<br />
<br />
#header{<br />
width:100%;<br />
height:100px;<br />
background:url(images/head_bg.png);<br />
background-color: #FFFFFF;<br />
}
[hr]
以http://mepopedia.com/~css104-2c/hm/~jinjin/js/jquery.scrollTo-1.4.2-min.js"> /* 外連檔案 */
/* STEP 2: 頂部選單 */
#header
/* 內部檔案 */
/* 外連檔案 */
jQuery參考網站
http://jquery.com/
介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/
jQuery Mobile Gallery
http://www.jqmgallery.com/
[hr]
jQuery動態換頁效果範例
1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/
[hr]
製作步驟
以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果
[hr]
步驟一佈景設計
單欄網頁，單純的header,content區塊
step1.html
[hr]
style.css
[hr]
以http://mepopedia.com/~css104-2c/hm/~jinjin/js/jquery.scrollTo-1.4.2-min.js"> /* 外連檔案 */
/* STEP 2: 頂部選單 */
#header
/* 內部檔案 */
/* 外連檔案 */