鼠标移动到链接上，显示该链接对应的图片；并随着鼠标移动，图片移动。

静态页面显示动态图：(图片和该页面放在同一目录下，直接浏览器打开页面。图片名称下载后如果不是“身份证照片.jpg”，需要改一下。)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js弹出图片</title>
	<style>
		#img{width:400px;height:300px;border:black 1px solid;}
		#image{position: absolute;display: none;z-index:9998;}
		#photo_dialog{z-index:9999;}
	</style>
</head>
<body>
	<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >显示图片</a>
	<a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >显示图片</a>
	<!--动态显示的图片-->
	<div id="image">
		<img src="身份证照片.jpg" alt=""><!--加上AJAX可以根据不同的超链接来显示不同图片-->
	</div>
<script>
	//显示图片
	function displayImg() {
		var img = document.getElementById("image");
		var x = event.clientX + document.body.scrollLeft + 20;
		var y = event.clientY + document.body.scrollTop - 5; 

		img.style.left = x + "px";
		img.style.top = y + "px";
		img.style.display = "block";
	}
	//图片消失
	function vanishImg(){
		var img = document.getElementById("image");
		img.style.display = "none";
	}
</script>
</body>
</html>

身份证照片

动态显示图片：

<!DOCTYPE HTML>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>测试页面</title>
   <style>
      #img{width:400px;height:300px;border:black 1px solid;}
      #image{position: absolute;display: none;z-index:9998;}
      #photo_dialog{z-index:9999;}
   </style>
</head>
<body class="easyui-layout">
	<a href="#" onmouseover="displayImg(data)" onmouseout="vanishImg()" onmousemove="displayImg(data)" >显示图片</a>
	<a href="#" onmouseover="displayImg(data)" onmouseout="vanishImg()" onmousemove="displayImg(data)" >显示图片</a>
	
	<div id="image">
		<img src="" alt="" id="img">
	</div>
   <script th:inline="javascript">
	//显示照片,根据传入的data的值的不同显示不同照片
	function displayImg(sUrl) {
		var img = document.getElementById("image");
		var x = event.clientX + document.body.scrollLeft + 20;
		var y = event.clientY + document.body.scrollTop - 5;
		img.style.left = x + "px";
		img.style.top = y + "px";
		img.style.display = "block";
		$.ajax({
			type:'post',
			data:{"canShuMingCheng":sUrl}, //参数
			dataType:'json',
			url: "这里填写请求后台的路径",
			success: function(data) {
				if(data){//这里的data是ajax返回的data。
					$("#img").attr("src", data);
				}
			},
			error:function(data){
				alert('查看失败！');
			}
		});
	}
	//隐藏照片
	function vanishImg(){
		var img = document.getElementById("image");
		img.style.display = "none";
	}

   </script>
</body>

鼠标移动到链接上，显示该链接对应的图片；并随着鼠标移动，图片移动。

猜你喜欢