<!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保存工作成果了
时间： 2024-07-29 17:37:07