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

Advanced

[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果

1. step5: 地標設定



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




1.加入視角及地標元件
<html> <head> <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; /* 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; } </style> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<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="#" class="point" id="point1"><img src="images/s1_point1.png" /></a> <a href="#" class="point" id="point2"><img src="images/s1_point2.png" /></a> <a href="#" class="point" id="point3"><img src="images/s1_point3.png" /></a> <a href="#" class="point" id="point4"><img src="images/s1_point4.png" /></a> <a href="#" class="point" id="point5"><img src="images/s1_point5.png" /></a> </div> </li><!--END OF FIRST 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="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="http://www.funtaipei.tw/js/main.js"></script>--> <script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script> <script> $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); </script> </html>


2.加入地標定位設定CSS
<html> <head> <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; } /* SETP5: 地標設定 */ /* 絕對定位,每一地標給予一座標值 */ #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> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<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="#" class="point" id="point1"><img src="images/s1_point1.png" /></a> <a href="#" class="point" id="point2"><img src="images/s1_point2.png" /></a> <a href="#" class="point" id="point3"><img src="images/s1_point3.png" /></a> <a href="#" class="point" id="point4"><img src="images/s1_point4.png" /></a> <a href="#" class="point" id="point5"><img src="images/s1_point5.png" /></a> </div> </li><!--END OF FIRST 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.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="js/main.js"></script>--> <script type="text/javascript" src="js/respond.min.js"></script> <script> $(function() { // 頁面捲動 $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); // 防止目前頁面轉到「超連結」所指定的網頁 return false; }); }); </script> </html>


2. 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);


3. STEP7 燈箱式跳出頁面效果


<html><head> <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> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/Logo.png"/></a> <li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<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="#" class="point" id="point1"><img src="images/s1_point1.png" /></a> <a href="#" class="point" id="point2"><img src="images/s1_point2.png" /></a> <a href="#" class="point" id="point3"><img src="images/s1_point3.png" /></a> <a href="#" class="point" id="point4"><img src="images/s1_point4.png" /></a> <a href="#" class="point" id="point5"><img src="images/s1_point5.png" /></a> <div class="display_panel" id="s1panel_1"> <div class="panel_title"><img src="images/s1_photo1_title.png"></div> <div class="panel_phtoto"><img src="images/s1_photo1.png"></div> <p class="description"> 坐落在熱鬧的公館商圈內,有著一處與藝術結合的住宅區-寶藏巖國際藝術村,走了一小段的斜坡,映入眼簾的是一間廟宇「寶藏巖」,寶藏巖主要祭祀觀音佛祖, 是台北古老佛寺之一又稱為石碧潭寺,這裡目前已規劃成一個國際藝術村。寶藏巖聚落的地景特殊,巷弄蜿蜒,石梯起伏,沿著山坡構築錯落的風貌。放慢腳步隨著蜿蜒的巷弄走,細細的閱讀每間屋子令人動容的故事,有一些民宅已成為藝術家的工作室,轉過一個彎發現前方老舊的牆壁上雖然有著現代感的塗鴉,但不會讓人覺得有違和感。站在高處向遠方望去,看見不遠處高樓大廈林立,有種時空交錯的感覺,有機會來這裡走走,說不定能發現小驚喜。 </p> <div class="x_btn"><img src="images/delete_btn.png"></div> </div> </div> </li><!--END OF FIRST 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.mousewheel.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <!--<script type="text/javascript" src="js/main.js"></script>--> <script type="text/javascript" src="js/respond.min.js"></script> <script> $(function() { // 頁面捲動 $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); // 防止目前頁面轉到「超連結」所指定的網頁 return false; }); // HTML元素跳動效果 setInterval(function(){ $(".point").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000) }, 2000); // 隱藏燈箱 $('.display_panel').hide(); }); // 打開燈箱 (fadeIn) $('#point1').click(function (){ $('#s1panel_1').fadeIn(500); return false; }); // 關閉燈箱 $('.x_btn').click(function (){ $('.display_panel').hide(); return false; }); </script> </html>


4. 2015/5/28上課影音


HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0




5. 上課影片


游標位置設定--CSS絕對定位
http://youtu.be/gRWUhiqFrCw





游標動態效果-HTML元素跳動- jQuery動畫效果




燈箱效果 jQuery燈箱式跳出頁面效果
http://youtu.be/vyIXMKT2yXc





Edited 16 time(s). Last edit at 06/03/2015 10:11PM by JinJin.
(編輯記錄)