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

原创

已于 2025-03-31 22:14:33 修改 · 4.6k 阅读

29 ·

CC 4.0 BY-SA版权

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

文章标签：

#计算机外设 #javascript #开发语言

于 2018-07-10 10:20:34 首次发布

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