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


Posted in Javascript onJanuary 18, 2019

图片跟随鼠标移动并放大js特效,供大家参考,具体内容如下

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

本案例代码,效果图,代码,参考如下:

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

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>

使用说明:

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

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

希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 #Javascript
jQuery无冲突模式详解
Jan 17 #jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 #jQuery
React性能优化系列之减少props改变的实现方法
Jan 17 #Javascript
vue 项目接口管理的实现
Jan 17 #Javascript
详解VUE单页应用骨架屏方案
Jan 17 #Javascript
Jquery获取radio选中值实例总结
Jan 17 #jQuery
You might like
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
php中如何执行linux命令详解
2018/11/06 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
100行代码实现一个vue分页组功能
2018/11/06 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python多线程扫描端口(线程池)
2019/09/04 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
python实现人机猜拳小游戏
2020/02/03 Python
python构造IP报文实例
2020/05/05 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
个人创业事迹材料
2014/12/30 职场文书
新闻稿怎么写
2015/07/18 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS