Download
1 / 14
140 likes | 227 Views
網路程式設計專題. 痞子英雄. 用了哪些技術. DOM 、 Event 、 javascript ， css. 網頁地圖. 分頁. <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>nav </title> <style type="text/css"> body{background-color:} div {color:gray} </style> <body>
E N D
網路程式設計專題 痞子英雄
用了哪些技術 • DOM、Event、javascript，css
<html xmlns = "http://www.w3.org/1999/xhtml"> • <head> • <title>nav • </title> • <style type="text/css"> • body{background-color:} • div {color:gray} • </style> • <body> • <h1 style="color:white"><a href="photo.html" target="main">圖片 • </a><br/> • <a href="story.html" target="main">故事 • </a><br/> • <a href="links.html" target="main">相關連結 • </a><br/> • <a href="character.html" target="main">人物 • </a><br/> • <a href="main.html" target="main">回首頁 • </a><br/></h1> • </body> • </html> ←CSS
<script type="text/javascript"> • var current= new Date(); • document.writeln("現在時間:"+ current.toLocaleString() ); • var seconds = 0; • function startTimer() • { • window.setInterval( "updateTime()", 1000 ); • } function updateTime() • { • ++seconds; • document.getElementById( "soFar" ).innerHTML = seconds; • } </script> • <img src="photo/top_banner_.jpg" /><br/> • </head> • <body onload = "startTimer()"> • <p>您已經在此網站停了: • <strong id = "soFar">0</strong>秒</p> • <img src="photo/海港城.jpg" /> ← event
<head> • <title>INDEX</title> • </head> • <frameset cols="200,*"> • <frame name ="leftframe" src ="nav.html"/> • <frame name ="main" src ="main.html"/> • <noframes> • <body> • <p><a href="nav.html"></a></p> • </body> • </noframes> • </frameset>
DOM • function run() • { • count += speed; • if ( count >= 450 ) • { • window.clearInterval( interval ); • interval = null; • } • var bigImage = document.getElementById( "imgCover" ); • bigImage.style.width = count + "px"; • bigImage.style.height = .7656 *count + "px"; • } • function display( imgfile ) • { • if ( interval ) • return; • var bigImage = document.getElementById( "imgCover" ); • var newNode = document.createElement( "img" ); • newNode.id = "imgCover"; • newNode.src = "fullsize/" + imgfile; • newNode.alt = "Large image"; • newNode.className = "imgCover"; • newNode.style.width = "0px"; • newNode.style.height = "0px"; • bigImage.parentNode.replaceChild( newNode, bigImage ); • count = 0; // start the image at size 0 • interval = window.setInterval( "run()", 10 ); // animate
} • </script> • </head> • <body> • <div id = "mainimg" class = "mainimg"> • <img id = "imgCover" src = "fullsize/2009412184839.jpg" • alt = "Full cover image" class = "imgCover" /> • </div> • <div id = "thumbs" class = "thumbs" > • <img src = "thumbs/2009412184839.jpg" alt = "2009412184839" • onclick = "display( '2009412184839.jpg' )" /> • <img src = "thumbs/1.jpg" alt = "1" • onclick = "display( '1.jpg' )" /> • <img src = "thumbs/U2519P28T3D2246034F326DT20081111201633.jpg" alt = "U2519P28T3D2246034F326DT20081111201633" • onclick = "display( 'U2519P28T3D2246034F326DT20081111201633.jpg' )" /> • <img src = "thumbs/32.jpg" alt = "32" • onclick = "display( '32.jpg' )" /> • <img src = "thumbs/11111.jpg" alt = "11111" • onclick = "display( '11111.jpg' )" /> • <img src = "thumbs/333.jpg" alt = "333" • onclick = "display( '333.jpg' )" /> • </div> • </body>
<style type="text/css"> • body{background-color:} • a.nodec{text-decoration:none} • a:hover{background-color:yellow} • </style> • <body> • <a class="nodec" href="http://www.pts.org.tw/~web03/ruffian_hero/index1.htm" >公視《痞子英雄》官網 • </a><br/> • <a class="nodec" href="http://www.prajnaworks.com/" >普拉嘉國際意像影藝《痞子英雄》官方網站 • </a><br/> • <a class="nodec" href="http://www.wretch.cc/blog/prajnaworks" >普拉嘉國際意像影藝《痞子英雄》官方部落格 • </a><br/> • <a class="nodec" href=" http://www.prajnaworks.com/discuz/" >普拉嘉國際意像影藝《痞子英雄》官方論壇 • </a><br/> • <a class="nodec" href="finalreport.ppt">投影片下載</a> • </body>
