图片跟随鼠标移动并放大js特效

最新推荐文章于 2024-07-19 06:00:00 发布

草巾冒小子

最新推荐文章于 2024-07-19 06:00:00 发布

阅读量4.5k

点赞数 6

分类专栏： JavaScript img图片处理

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/80981603

版权

JavaScript 同时被 2 个专栏收录

70 篇文章 2 订阅

订阅专栏

img图片处理

42 篇文章 2 订阅

订阅专栏

js实现图片放大，并跟随鼠标移动

图片跟随鼠标移动并放大js特效

很多网站有类似于淘宝放大镜的效果，只不过这里说的是 “ 不仅能直接放大，而且会跟随鼠标移动 ” ！
类似于“ DEDECMS ”官网的案例中心的效果！

本案例代码，效果图，代码，参考如下：

这里写图片描述

JS代码:

<script>
	//展示
	function showBigPic(filepath) {
	    //将文件路径传给img大图
	    document.getElementById('bigPic').src = filepath;
	    //获取大图div是否存在
	    var div = document.getElementById("bigPicView");
	    if (!div) {
	        return;
	    }
	    //如果存在则展示
	    document.getElementById("bigPicView").style.display="block";
	    //获取鼠标坐标
	    var intX = window.event.clientX;
	    var intY = window.event.clientY;
	    //设置大图左上角起点位置
	    div.style.left = intX +10+ "px";
	    div.style.top = intY + 10+"px";
	}
	
	//隐藏
	function closeimg(){
	    document.getElementById("bigPicView").style.display="none";
	}
</script>

可以封装为js插件：showBigPic.js

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片放大显示并跟随鼠标移动</title>
<script src="js/showBigPic.js"></script>
</head>
<body>
	<h3>图片放大显示并跟随鼠标移动</h3>
	
	<hr />
	
	<div id="bigPicWrap">
		<img src="images/01.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br />
		<img src="images/02.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br />
		<img src="images/03.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br />
		<img src="images/04.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br />
		<img src="images/05.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br />
		<img src="images/06.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br />
	</div>
	
	<div id="bigPicView" style="position:absolute;display:none;">
		<img src="" width="600px" id="bigPic"/><br />
	</div>
</body>
</html>