FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)

step5: 地標設定
重點：
CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right

<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #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:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 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:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; } #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; text-align: center; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* 地標設定 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:300px; left:650px; } #point2 { top:320px; right:80px; } #point3 { top:320px; left:520px; } #point4 { top:400px; left:670px; } #point5 { top:430px; right:40px; } </style> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('rs/le/=cphtrtietospne%1n3UtAC.%mr2YsFns%Vi2UnFvgmW.e8cpMooPmpv/eutdkriPaaAn.6scLiojtmS.%Vp2thFVp%a?2du3f', 77, 104, 3, 34), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1014757504" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('t2sn.Fetpmc.hetrppis?oosupnire2nldqg=iY.haYct.xotcnmpoJ/%m/t3%/rA2pa%Frn2%esF2si%3e', 77, 83, 4, 27), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1180141918" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('h.ppcr?oeumsr%el2n=Fth%.t2rt3spss%ei3cnAtg%i.2ocFno%3m2G/FYtmUreuapGnoTspBiemtdL.i/pa/', 77, 86, 3, 30), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1168212597" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('norihrt3Fmpam%eolrnsgmatpltA%ee.%2cn/ets./n.?=p%2pdc23t4/s.ictspuh%2FoioFsidper', 77, 79, 20, 14), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1154184573" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('/mqtefrpYaognpLsecidctiK.a2p./hc/pop?mru%er2slFe=%nh2tt3.tsrpes%cs3tiAin%og2n.F5c%6o2HmFf', 77, 89, 3, 20), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="595870954" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('s%ei3cnAtg%i.2ocFno%6m2Q/Fitmure4apsnowspJieLtdk.i/pa/h.ppcr?oeumsr%el2n=Fth%.t2rt3sps', 77, 86, 3, 12), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="581777394" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('pnitmmorgtte%ne..pp27scp%oFneoh3p%AnmpAe2zt/?%d3K.tu2isJrrrFaensal%.c/sn=2ct/ishFoi', 77, 83, 7, 2), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> <li id="section3" class="box"><!--FIRST--> <div class="content"> <div class="text">視 角</div> <a href="javascript:;" class="point" id="point1" onclick="post_nav(sdl('nupzgroi.lpzc=exohd/mti//taptp.rr%cea3osnAmes%%ni22ttFF..%%rp22shF3spmIi?ev', 69, 75, 4, 14), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="962950523" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point1.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point2" onclick="post_nav(sdl('r%Us3esANi%7n2dgF3.%Sc2toFnmm2/ePtpUrokapQneBsdsiiAta8..Npc2ho/pm/?%pu2rrFel%s=2eh3ntatt1.pd', 69, 92, 3, 10), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="2058850089" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point2.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point3" onclick="post_nav(sdl('.i/pa/h.ppcr?oeumsr%el2n=Fth%.t2rt3spfs%9i3ZnAig%1.2TcFQo%Xm28/FFtm7rePapTno2spJie2tdk', 69, 86, 3, 28), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1535292166" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point3.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point4" onclick="post_nav(sdl('ihrt3Fmpam%LrnsgmatpltA%ee.%2/ets./n.?=p%2pdc23/s.ictspuh%2FoioFhpernor', 69, 71, 18, 26), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="483412407" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point4.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point5" onclick="post_nav(sdl('ennr%p2sgsl2eFe.i=Fd%ncth%i2to.t2a3.mptF./r/hpmc/stp%eopsr?3pmriauAo%', 69, 69, 7, 4), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="502530378" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point5.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> <!----> STEP6 HTML元素跳動效果
1. 固定間隔執行函式
setInterval(function(){ // 要執行的函式 }, 5000); 2. jQuery動畫效果
$("HTML元素").animate({top:"-=15px"},1000); // 向上15px $("HTML元素").animate({top:"+=15px"},1000); // 向下15px 3. 綜合效果
setInterval(function(){ $(".point").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000); }, 2000); STEP7 燈箱式跳出頁面效果
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #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:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 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:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; } #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; text-align: center; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* 地標設定 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:300px; left:650px; } #point2 { top:320px; right:80px; } #point3 { top:320px; left:520px; } #point4 { top:400px; left:670px; } #point5 { top:430px; right:40px; } /* 景點設計 */ .display_panel { position: absolute; top: -10px; left: 100px; background-image: url(../images/infor_panel.png); width: 655px; height: 537px; z-index: 999; padding-top: 60px; padding-left: 100px; padding-right: 60px; } .description { margin-top: 15px; } .x_btn{ position: absolute; top:20px; right:10px; cursor:pointer; z-index: 10000} </style> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('tppulht%A2%Feoei.o%F2scin/peetrsn.o/rni.h?r=tp3%F2mppdacm2%3eto1/rsn.sigcmtas', 77, 77, 39, 27), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1014757504" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('ldcg=in.hajct.notcsmpoT/%m/t3%/rA2pa%Frn2%esF2si%3et2sn.Fetpmc.hetrppis?oosupnire2n', 77, 83, 4, 35), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1180141918" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('/rm.hFe2ips/pt%dForstht2i%neirppFa23sna?%m.3tegnu3ecsJn.srApoe2tcil%omc/.ot=2p%t', 77, 80, 9, 1), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1168212597" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('siniaht.e.cepokhm2p%/?2/uFpr%rl2e=3shsetentctpt.%ir3osAns%4i2JnFzg%3.2gcFkomGmeN/pUtojrpYaeFndl', 77, 95, 3, 25), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1154184573" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('e?anu.trc.lor=msh%st2itFnp%g%2.33cAso%em2c/Ftt%ir2oaFnnm5se/ip/top.prpeehdspi', 77, 77, 3, 6), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="595870954" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('ip=%Fedo%c6pnscrt?h3%pim2tHrtioa.utA2oa%3i8e.nmnprt%Fp.2so/srg/shlp2mecFen/es.t', 77, 79, 16, 26), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="581777394" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('u3Urs/le/=cphtrtietospne%7n3LtAX.%Zr2DsFes%9i2DnFcgm5.eDcpWoohmpQ/eGtdzrilaacn.cscFiottmh.%Zp2thFEp%h?2S', 77, 104, 3, 33), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> <li id="section3" class="box"><!--FIRST--> <div class="content"> <div class="text">視 角</div> <a href="javascript:;" class="point" id="point1" onclick="post_nav(sdl('.pmr%vs35sA1i%Yn2TgFe.%nc2ToFkmmr/eltpyroGaprneBsdjiiyta2..NpcFho/pm/?%pu2rrFel%s=2eh3ntDttr', 69, 92, 3, 9), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="962950523" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point1.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point2" onclick="post_nav(sdl('etkntwtpt.%fr34sAZs%Ii2bnFng%f.2jcFxomkme7/patoXrpQae8ndXsiTiaNt.L.cypophmAp%/?2/uFpr%rl2e=3shv', 69, 95, 3, 6), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="2058850089" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point2.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point3" onclick="post_nav(sdl('rmnl%t=2.hFrt%st2sp3i%kn3MgA8.%rc2PoFCm%1/2ztFdrmbaejnpHsogipIte/.d/pipharp.e?csuoe', 69, 83, 3, 34), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1535292166" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point3.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point4" onclick="post_nav(sdl('tph2ooQenrhtFpmDngapt%e%/t.n?p2d2/.csu%FiFproir3ma%rsmtlAe.2es/.=%pc3si', 69, 71, 9, 21), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="483412407" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point4.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point5" onclick="post_nav(sdl('ot=2p%/rm.hFe2ps/pt%dFrstht2i%eirppFa2sna?%m.3egnu3eccn.srApo4tcil%om/.', 69, 71, 8, 18), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="502530378" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point5.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <div class="display_panel" id="s1panel_1"> <div class="panel_title"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1814289137" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_photo1_title.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1464543697" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_photo1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> 坐落在熱鬧的公館商圈內，有著一處與藝術結合的住宅區－寶藏巖國際藝術村，走了一小段的斜坡，映入眼簾的是一間廟宇「寶藏巖」，寶藏巖主要祭祀觀音佛祖， 是台北古老佛寺之一又稱為石碧潭寺，這裡目前已規劃成一個國際藝術村。寶藏巖聚落的地景特殊，巷弄蜿蜒，石梯起伏，沿著山坡構築錯落的風貌。放慢腳步隨著蜿蜒的巷弄走，細細的閱讀每間屋子令人動容的故事，有一些民宅已成為藝術家的工作室，轉過一個彎發現前方老舊的牆壁上雖然有著現代感的塗鴉，但不會讓人覺得有違和感。站在高處向遠方望去，看見不遠處高樓大廈林立，有種時空交錯的感覺，有機會來這裡走走，說不定能發現小驚喜。 </p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1436676596" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/delete_btn.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> <!---->