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实现文章图片弹出放大效果
Apr 06 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery实现简易聊天框
Feb 08 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
关于尾递归的使用详解
2013/05/02 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
javascript基础知识
2016/06/07 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python日志模块logging简介
2015/04/13 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
树莓派升级python的具体步骤
2020/07/05 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
经销商培训邀请函
2014/01/21 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
企业指导教师评语
2014/04/28 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技