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

不可自拔

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

阅读量2.9k

点赞数

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

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

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

版权

本地测试：本地新建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 &#