html页面里面如何实现点击小图放大查看大图

html页面里面如何实现点击小图放大查看大图,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div {width: 72pxheight: 72pxbackground: url(small3.png) no-repeatoverflow: hidden}

3、浏览器运行index.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/>&nbsp&nbsp&nbsp&nbsp努力就有收获</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>

效果如下:(至于再点击大图后效果消失,你可以把关闭窗口按钮触发的代码改成单击后的代码)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6248183.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存