jquery图片放大镜效果


Posted in jQuery onJune 23, 2017

昨天看一篇博文的时候,说到了这个效果,于是自己想试着写一个,没有使用插件,

基本的想法就是,左边是小图,右边对应大图,鼠标进去小图范围之后,获取他的坐标(x,y)然后计算

x/小图的宽度*大图得宽度/2

y/小图的高度*大图得高度/2

计算出来的两个结果即为大图得左右偏移距离

/2是为了让右边区域不会出现空白。

经过测试,ie7以上以及主流浏览器都可以用,代码如下:

<div class="wrap">
  <div class="small">
    <img src="1s.jpg">
    <div class="tool" id="tool"></div>
  </div>
  <div class="big"><img src="1.jpg"></div>
</div>

.wrap{overflow:hidden;margin:50px auto;}
.small{position:relative;float:left;width:214px;height:328px;}
 .tool{width:100px;height:100px;position:absolute;top:50px;left:100px;background:rgba(255,255,255,0.5);}
 .big{float:left;margin:0 40px;width:330px;overflow:hidden;height:328px;display:none;position:relative;}
.big img{position:absolute;width:650px;height:960px;}

主要的JS代码如下:

//不加蒙版放大镜
    $('.small').mousemove(function(e) {
      $(this).siblings('.big').show();
      //var e = event || window.event;
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
      //滚动条距离屏幕左边的宽度
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      //滚动条距离屏幕上面的高度
      //e.pageX相对于文档左边的高度
      //e.pageY相对于文档上面的高度

      //e.clientX相对于屏幕左边的高度
      //e.clientY相对于屏幕上面的高度
      var xx = e.pageX || e.clientX + scrollX;//相对于文档左边的宽度
      var yy = e.pageY || e.clientY + scrollY;//相对于文档上面的高度
      //.offset().top元素相对于文档上面的位置
      //.offset().left元素相对于文档左面的位置
      var y=yy-$(this).offset().top;//鼠标相对于元素的x,y坐标
      var x=xx-$(this).offset().left;
      var width=$(this).width();
      var lwidth=$(this).siblings('.big').find('img').width();
      //按照大图与小图的比例来进行移动的
      var left=x/width*lwidth/2;
      var height=$(this).height();
      var lheight=$(this).siblings('.big').find('img').height();
      var top=y/height*lheight/2;
      $(this).siblings('.big').find('img').css({left:-left,top:-top});
      //console.log(x + '---' + y);
      //不加蒙版放大镜结束
      //蒙版跟着动
      var twidth=$(this).find('.tool').width();
      var theight=$(this).find('.tool').height();
      var tleft=x-twidth/2;
      var ttop=y-theight/2;
      if(tleft<0){
        tleft=0;
      }
      if(tleft>width-twidth){
        tleft=width-twidth;
      }
      if(ttop<0){
        ttop=0
      }
      if(ttop>height-theight){
        ttop=height-theight;
      }
      $(this).find('.tool').css({left:tleft,top:ttop});
    });

效果如下:

jquery图片放大镜效果

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 #jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 #jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 #jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
You might like
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
网站上面有这种切换效果
2006/06/26 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
javascript正则表达式总结
2016/02/29 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
js获取ip和地区
2017/03/10 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
python简单实现操作Mysql数据库
2018/01/29 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
基于python指定包的安装路径方法
2018/10/27 Python
python多进程并发demo实例解析
2019/12/13 Python
Python版中国省市经纬度
2020/02/11 Python
Java软件工程师综合面试题笔试题
2013/09/08 面试题
班组长岗位职责
2014/03/03 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
高中教师评语大全
2014/04/25 职场文书
2014年销售人员工作总结
2014/11/27 职场文书