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

不可自拔

已于 2024-01-21 11:10:30 修改

阅读量2.8k

点赞数

分类专栏： js操作显示图片文章标签： j 鼠标移动到链接上显示图片

于 2018-12-06 10:00:04 首次发布

本文链接：https://blog.csdn.net/csdn_csy/article/details/84846913

版权

js操作显示图片专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本地测试：本地新建txt，将title是“js弹出图片”的html代码复制到txt文件，修改txt文件扩展名，改为html。同时将图片下载到本地，修改图片名字为1.jpg，并将图片放到刚刚新建的html文件的同一目录下。浏览器打开该html，鼠标移动，查看效果。


静态页面显示动态图：

<!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>
	<!--动态显示的图片-->
	<div id="image">
		<img src="1.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>
	
	<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>

不可自拔

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
鼠标移动到链接上，显示该链接对应的图片；并随着鼠标移动，图片移动。

静态页面显示动态图：(图片和该页面放在同一目录下，直接浏览器打开页面。图片名称下载后如果不是“身份证照片.jpg”，需要改一下。)&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js弹出图片&lt;/title&
复制链接

扫一扫