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 tools 系列 scrollable(2)
Sep 06 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
Vue指令实现OutClick的示例
Nov 16 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
php FPDF类库应用实现代码
2009/03/20 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
python私有属性和方法实例分析
2015/01/15 Python
python将视频转换为全字符视频
2019/04/26 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
携程英文网站:Trip.com
2017/02/07 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
自荐信封面
2013/12/04 职场文书
应届毕业生求职信范文分享
2013/12/26 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
会议接待欢迎标语
2014/10/08 职场文书
给老婆的保证书
2015/01/16 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
高中语文教学反思范文
2016/02/16 职场文书
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python