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="data:images/01.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br /><img src="data:images/02.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br /><img src="data:images/03.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br /><img src="data:images/04.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br /><img src="data:images/05.jpg" width="300px" onmousemove="showBigPic(this.src)" onmouseout="closeimg()"/><br /><img src="data: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>

使用说明：

无需引入jquery.min.js;
已经封装为:showBigPic.js;
使用时：只需要设置
a. 对应的id选择器;
b. 鼠标悬停事件;
c. 鼠标离开事件;
合理设置放大尺寸：如果位于页面最顶部和最底部图片的放大效果，部分会被视图窗口遮盖，那么只需要鼠标滚轮即可查看放大的全图。
经实际测试，OK!

以上就是关于“ 图片跟随鼠标移动并放大js特效 ” 的全部内容。

图片跟随鼠标移动并放大js特效相关推荐

图片跟随鼠标移动效果的抖动问题
场景图片跟随鼠标移动效果的实现思路: 触发mousemove事件响应时,通过e.offsetX,e.offsetY获取到当前鼠标的位置.再修改图片的css样式中的top, left属性(图片采用绝对 ...
html浮动跟随鼠标,jQuery 图片跟随鼠标浮动
不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着. 本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动.为了方便查看和理解,在Demo的左下角把各个参数 ...
实现图片跟随鼠标移动
下面代码可以实现图片跟随鼠标移动 <html> <head><meta charset="utf-8"><title></ti ...
图片跟随鼠标移动案例
文献种类:专题技术总结文献开发工具与关键技术: DW前端技术作者:彭学员 :年级:2004 :撰写时间:2021 年 5 月 17日文献编号: ...
html图片跟随鼠标,跟随鼠标的图片 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
跟随鼠标的图片 [ 发布者:在远方┊来源:本站整理┊时间:2006-03-08┊浏览: 人次 ] 网页特效|JsCode.cn|---跟随鼠标的图片 var newtop=0 var newleft= ...
利用javaScript+css实现图片跟随鼠标联动效果页面
以前做小型的项目的时候总想着可以做一个很炫酷的主页面来,以前做过一个汽车销售管理系统的主页面,觉得很不错.虽然写这个的人不是我,但是我们觉得可以保存下来以便日后使用和参考.先看一下效果图!这个是可以跟 ...
html鼠标平滑滚动效果,JS特效代码 JS动态平滑滚动菜单效果
JS特效代码 JS动态平滑滚动菜单效果 www.css5.net body {cursor:crosshair; background:#111; margin:0; padding:0; posit ...
js 图片跟随鼠标移动
叒叒叒是pink老师的课里讲了一个非常有意思的案例图片可以跟着鼠标移动主要是添加一个mousemove的监听事件实时获取鼠标的坐标同时改变图片的坐标 html <img src=&quo ...
鼠标移动特效之图片跟随鼠标移动
代码如下: <!DOCTYPE html> <html><head><title></title><meta charset=&quo ...

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

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

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

JS代码:

html代码：

使用说明：

图片跟随鼠标移动并放大js特效相关推荐

最新文章

热门文章