<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片浏览</title> <link href="pic.css" rel="stylesheet" type="text/css"> </head> <body> <h1>Snapshots</h1> <ul> <li><a href="pic/image1.jpeg" title="盛世美颜" onclick="showPic(this);return false;">帅照1</a></li> <li><a href="pic/image2.jpeg" title="帅哥" onclick="showPic(this);return false;">帅照2</a></li> <li><a href="pic/image3.jpeg" title="绝代美颜" onclick="showPic(this);return false;">帅照3</a></li> <li><a href="pic/image4.jpeg" title="朦胧帅" onclick="showPic(this);return false;">帅照4</a></li> <li><a href="pic/image5.jpeg" title="酷" onclick="showPic(this);return false;">帅照5</a></li> <li><a href="pic/image6.jpeg" title="傲娇" onclick="showPic(this);return false;">帅照6</a></li> <!--return false;onclick事件处理函数所触发的Javascript代码返回给它的值是false， （所以这个链接的默认行为没有被触发，所以不会打开图片查看器，不会打开一个新的网页。）即防止用户被带到目标链接窗口 --> </ul> <p id="description">Choose a picture.</p> <img id="imgPlace" src="pic/封面.jpeg" alt="my image gallery"> <script type="text/javascript"> function showPic(thePic){ // event=event||window.event; // if(event.stopPropagation){ // event.stopPropagation(); // } // else{ // event.cancelBubble=true; // } //实现图片切换 var source=thePic.getAttribute("href"); var imgPlace=document.getElementById("imgPlace"); imgPlace.setAttribute("src",source); //实现文本切换 var title=thePic.getAttribute("title"); var description=document.getElementById("description"); //alert(description.childNodes[0].nodeValue); //childNodes[0]==firstChild 正如 childNodes[node.childNodes.length-1]=lastChild description.firstChild.nodeValue=title; } // window.onload=function(){ // var imgPlace=document.getElementById("imgPlace"); // var orginPic=imgPlace.getAttribute("src"); // // 点击页面空白处时 // document.onclick=function(){ // // 显示导航页 // imgPlace.setAttribute("src",orginPic); // } // } </script> </body> </html>
@charset "utf-8"; /* CSS Document */ /**{margin:0;padding:0;}*/ body{font-size:14px; width:100%;} img{border:none;} li{list-style:none;} input,select,textarea{ outline:none;} textarea{ resize:none;} h1{ color:#333; background:transparent;} a{ text-decoration:none; color:#DB4E27; background:transparent; font-weight:bold; } ul{ width:900px; margin:0 auto; } li{ height:16px; line-height:16px; float:left; width:150px; /*margin:10px auto;*/ margin-bottom:50px; text-align:center; } p{ clear:both; text-align:center; /*不定宽元素居中*/ } img{ display:block; margin:5px auto; height:600px; weight:440px; }
没有办法上传图片文件包，看来我以后可能得选择github保存工作成果了