JavaScript图片查看器 博客分类： WEB前端 js弹出层图片查看器缩略图div
程序员文章站
2024-03-25 15:01:16
...
图片查看器
实现原理：动态的绑定每个缩略图的onmouseover事件，在方法中显示图片展示层。给document绑定onclick，通过判断事件的坐标，来决定是否隐藏图片展示层，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 图片查看器 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!-- 设置缩略图的样式 -->
<style type="text/css">
td>img
{
width:150px;
height:150px;
border:1px solid blue;
}
div>img
{
width:700px;
height:600px;
}
</style>
<!-- 缩略图的JS事件 -->
<script type="text/javascript">
<!--
function userLoad()
{
var imgs = document.getElementsByTagName('img'); //缩略图
var imgdis = document.getElementsByTagName('imgdis'); //大图
var oBody = document.body;//body
//给缩略图绑定单击、光标进入以及离开的事件
for (var i = 0; i < imgs.length ; i++ )
{
var simg = imgs[i];
//单击缩略图
simg.onclick = function(event)
{
event = event || window.event;
//document.getElementById("imgdis").innerHTML = "<img src='"+this.src+"'>";
//document.getElementById("imgdis").style.display = "block";
try
{
event.cancelBubble = true;
}
catch (e)
{
event.stopPropagation();
}
}
//光标离开缩略图上
simg.onmouseout = function()
{
this.style.border = '1px solid blue';
}
//光标移到缩略图上
simg.onmouseover = function()
{
this.style.border = '2px solid red';
document.getElementById("imgdis").innerHTML = "<img src='"+this.src+"'>";
document.getElementById("imgdis").style.display = "block";
}
}
//给大图绑定点击事件
imgdis.onclick = function(event)
{
event = event || window.event;
try
{
event.cancelBubble = true;
}
catch (e)
{
event.stopPropagation();
}
}
//body的单击事件
document.onclick = function(event)
{
event = event || window.event;
var imgdis = document.getElementById("imgdis");
var pleft = parseInt(imgdis.style.left.replace('px',''));
var ptop = parseInt(imgdis.style.top.replace('px',''));
var pwidth = parseInt(imgdis.style.width.replace('px',''));
var pheight = parseInt(imgdis.style.height.replace('px',''));
if (event.screenX < pleft || event.screenX > (pleft+pwidth) || event.screenY < ptop || event.screenY > (ptop+pheight))
{
imgdis.style.display = "none";
}
}
}
//-->
</script>
</head>
<body onload="userLoad()">
<table>
<tr>
<td><img src="1.jpg" alt="1"></td>
<td><img src="2.jpg" alt="2"></td>
<td><img src="3.jpg" alt="3"></td>
<td><img src="4.jpg" alt="4"></td>
<td><img src="5.jpg" alt="5"></td>
<td><img src="6.jpg" alt="6"></td>
<td><img src="7.jpg" alt="7"></td>
<td><img src="8.jpg" alt="8"></td>
</tr>
</table>
<div id="imgdis" style="border:2px solid black;width:700px;height:600px;position:absolute;top:80px;left:300px;display:none;z-index:2;"></div>
</body>
</html>