Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[講義] jQuery動態換頁效果

[講義] jQuery動態換頁效果

1. jQuery參考網站


http://jquery.com/

介面:https://jqueryui.com/
下載:http://jquery.com/download/
技術文件:http://api.jquery.com/

jQuery Mobile Gallery
http://www.jqmgallery.com/

[hr]

2. 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]

3. 製作步驟



以下完成以單欄為主的多頁效果,特色為:
1.單欄網頁,單純的header,content區塊
2.網頁架構單純,以單頁的方式,使用錨點連結的方式,製作多頁效果

[hr]

1. 步驟一佈景設計


單欄網頁,單純的header,content區塊

step1.html

<!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>
[hr]
style.css

/* 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; }
[hr]
以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例

2. 完整index.html


<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>
[hr]

3. 完整style.css


@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; list-style-type: none; } .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; }
[hr]
參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063

[hr]
範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip



Edited 7 time(s). Last edit at 05/11/2017 09:25AM by JinJin.
(編輯記錄)