1 You Tube DOCTYPE html html langzhTW head
網頁設計 實務 1. 顯示隱藏You. Tube影片及縮放 <!DOCTYPE html> <html lang="zh-TW"> <head> <title>2013靜宜資管拾隨資味邀請影片(楊子青篇)</title> <meta charset="utf-8"> <style type="text/css">. disp { width: 600 px; height: 400 px; } </style> </head> <body> <button id="btn 1">顯示/隱藏</button> </br> <iframe src="http: //www. youtube. com/embed/l 2 GQPS 8_b. NY? autoplay=0&start=62" allowfullscreen scrolling="no" id="film" > </iframe> </body> </html> 3
網頁設計 實務 於<head>…</head>加入j. Query程式碼 <script src="http: //ajax. googleapis. com/ajax/libs/jquery/1. 10. 2 /jquery. min. js"> </script> <script> $(document). ready(function(){ $("#film"). hide(); $("#btn 1"). click(function(){ $("#film"). slide. Toggle(); }); $("#film"). hover( function() { $(this). add. Class("disp"); }, function() { $(this). remove. Class("disp"); }); </script> 4
網頁設計 實務 2. j. Query選單 <!DOCTYPE html> <head> </head> <body> <div id ="Nav. Bar"> <ul> <li id="pu"><a href="http: //www. pu. edu. tw">靜宜大學</a></li> <li id="pucci"><a href="http: //www. cci. pu. edu. tw">資訊學院</a></li> <li id="pucsim"><a href="http: //www. csim. pu. edu. tw">資管系</a></li> </ul> </div> </body> </html> 5
網頁設計 實務 於<head>…</head>加入CSS樣式 <style type="text/css"> ul{ margin: 0; padding: 0; } #Nav. Bar li { text-align : center; float : left; list-style-type : none; height : 20 px; width : 70 px; border-right : 1 px solid #FFFFFF; background-position: center 30 px; background-repeat: no-repeat; } #pu { background-image: url('pu. gif'); } #pucci { background-image: url('cci. gif'); } #pucsim { background-image: url('csim. gif'); } </style> 6
網頁設計 實務 於<head>…</head>加入j. Query <script src="http: //ajax. googleapis. com/ajax/libs/jquery/1. 10. 2/jquery. min. js"> </script> <script> $(document). ready(function(){ $("#Nav. Bar li" ). hover( function() { $(this). animate({height: 80}, 500); }, function() { $(this). animate({height: 20}, 500); }); </script> 7
網頁設計 實務 l 3. j. Query UI http: //jqueryui. com/ – 例如Accordion(手風琴)，選view source可看原始碼 8
- Slides: 8
