html点击页面上的小图片弹出大图片(急,急,急)
发布网友
共4个回答
热心网友
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" rev="stylesheet"href="style.css" type="text/css" />
<script type="text/javascript">
functionopenContent(x){
document.getElementById("content").style.display="block";
document.getElementById("content_img").getElementsByTagName("img")[0].src=document.getElementsByTagName("img")[x].alt;
document.getElementById("content_img").style.display="block";
}
functioncloseContent(x){
document.getElementById("content").style.display="none";
x.parentNode.style.display="none";
}
</script>
<style type="text/css">
table{width:90%;
height:90%;
margin:auto;
text-align:center;
margin-top:20px;}
#photo{margin:auto;
width:1000px;
height:678px;
border:1pxsolid #ccc;
margin:10px;
float:left;}
.photoTitle{height:30px;}
#content{display:none;
position:absolute;
width:100%;
height:100%;
z-index:1;
background:#000;
top:0px;
filter:alpha(opacity=85);}
#content_img{display:none;
position:absolute;
z-index:2;
width:100%;
text-align:center;
top:100px;
left:0px;
}
</style>
</head>
<body>
<div id="top"><div id="txt">成功没有早晚<br/> 努力就有收获</div>
</div>
<div id="nav">
<ul>
<li><ahref="index.html" target="_self">首页</a></li>
<liclass="bar">|</li>
<li><ahref="diary.html" target="_self">日志</a></li>
<liclass="bar">|</li>
<li><ahref="photo.html" target="_self">相册</a></li>
<liclass="bar">|</li>
<li><ahref="#" target="_self">留言</a></li>
</ul>
</div>
<div id="main">
<divid="photo">
<h4>|图片列表</h4>
<table>
<trclass="photoTitle"><td><ahref="javascript:openContent(0);">图片</a></td>
<td><ahref="javascript:openContent(1);">图片</a></td>
<td><ahref="javascript:openContent(2);">图片</a></td></tr>
<trvalign="top"><td><ahref="javascript:openContent(0);"><imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/></a></td>
<td><ahref="javascript:openContent(1);"><imgsrc="img/2.png" title="单击显示大图" alt="img/2.jpg"/></a></td>
<td><ahref="javascript:openContent(2);"><imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/></a></td></tr>
<trclass="photoTitle"><td><ahref="javascript:openContent(3);">图片</a></td>
<td><ahref="javascript:openContent(4);">图片</a></td>
<td><ahref="javascript:openContent(5);">图片</a></td></tr>
<trvalign="top"><td><ahref="javascript:openContent(3);"><imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/></a></td>
<td><ahref="javascript:openContent(4);"><img src="img/2.png"title="单击显示大图" alt="img/2.jpg"/></a></td>
<td><ahref="javascript:openContent(5);"><imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/></a></td></tr>
<trclass="photoTitle"><td><ahref="javascript:openContent(6);">图片</a></td>
<td><ahref="javascript:openContent(7);">图片</a></td>
<td><ahref="javascript:openContent(8);">图片</a></td></tr>
<trvalign="top"><td><ahref="javascript:openContent(6);"><imgsrc="img/2.png" title="单击显示大图"alt="img/2.jpg"/></a></td>
<td><ahref="javascript:openContent(7);"><imgsrc="img/1.png" title="单击显示大图"alt="img/1.jpg"/></a></td>
<td><ahref="javascript:openContent(8);"><imgsrc="img/3.png" title="单击显示大图"alt="img/3.jpg"/></a></td></tr>
</table>
</div>
</div>
<div id="content"></div>
<div id="content_img">
<imgsrc="" id="img_dis"/><br/>
<buttononclick="closeContent(this);" id="content_btn">关闭窗口</button>
</div>
<div id="bottom">
底部个人信息
</div>
</body>
</html>
效果如下：（至于再点击大图后效果消失，你可以把关闭窗口按钮触发的代码改成单击后的代码）
追问不行，avascript:openContent(0);">图片 这个位置图片换成图片的地址是吧， 这个是放要放大的图片是吧，地址放在哪个才可以实现？追答在根目录下新建一个名为img的文件夹，把要放大的图片放在这个文件夹下。
单击这个图片后，在openContent(0)方法里，将这个控件的alt赋值给content_img，即document.getElementById("content_img").getElementsByTagName("img")[0].src=document.getElementsByTagName("img")[x].alt;所以，这个alt就是要放大图片的路径，img/1.jpg，img是文件夹名，1.jpg是文件名称。
热心网友
显示大图片的这个DIV绝对定位到想要的位置，隐藏，大小图片用一个src,设定大小，onclick的时候如果需要适用不同的小图片的话就改相应src（可以传小图的src），然后显示大div就可以了，再点大div隐藏大div，
有不懂得再问
热心网友
这里面有你想要的效果！希望可以帮到你！
热心网友
建议你自学一下jqury，里面各种各样的变换都有
