JavaScript图片查看器

最新推荐文章于 2023-10-31 09:51:23 发布

tian20042008

最新推荐文章于 2023-10-31 09:51:23 发布

阅读量385

点赞数

分类专栏： WEB前端文章标签： js弹出层图片查看器缩略图 div

本文链接：https://blog.csdn.net/tian20042008/article/details/84445400

版权

WEB前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

图片查看器

实现原理：动态的绑定每个缩略图的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 οnlοad="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>