jquery实现图片放大镜效果


Posted in jQuery onDecember 23, 2020

本文实例为大家分享了jquery实现图片放大镜效果的具体代码,供大家参考,具体内容如下

首先是HTML

<div id="box">
    <div id="big">
      <div>
        <img src="./img/可达鸭.jpg" alt="">
      </div>
      <div id="fd"></div>
    </div>
    <div id="fdshow">
      <img src="./img/可达鸭.jpg" alt="">
    </div>
</div>

这里主要是放入两张照片,和一个空的标签,用于放大用

接下来是css样式,这里非常重要,能不能成功放大这里占据了6成左右

<style>
    *{
      margin: 0px;
      padding: 0px;
    }
    #box{
      position: relative;
    }
    #big{
      width: 500px;
      height: 300px;
    }
    #big img{
      width: 500px;
      height: 300px;
    }
    #fd{
      width: 100px;
      height: 100px;
      background-color: white;
      opacity: 0.4;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    #fdshow{
      width: 200px;
      height: 200px;
      overflow: hidden;
      position: relative;
      border: 1px solid;
    }
    #fdshow>img{
      width: 1000px;
      height: 600px;
      position: absolute;
      top: 0px;
      left: 0px;
    }
</style>

接下来是jq

<script>
    $("#big img").on("mousemove",function(a){
      var x=a.pageX-$("#big").offset().left;
      var y=a.pageY-$("#big").offset().top;
      console.log(x,y)
      var style1={
        top:y,               
        left:x,
        "display":"block"
      };
      $("#fd").css(style1);
      var style2={ 
        'left':-2*x,
  'top':-2*y
      };
      $("#fdshow>img").css(style2)
    })
</script>

效果达到放大2倍 (对css样式的要求特别严格)

1.css 样式 大图片是小图片的2倍

2.给大图片外面套一个div设置一个是那个选图片的div的2倍,然后给大图片的div设置一个溢出部分隐藏 overflow: hidden;

3.获取鼠标在元素内的位置

(1).获取鼠标相对于文档的位置
(2).然后在获取元素的在当前可视区域的位置
(3).鼠标在元素内的位置 == 鼠标相对于文档的位置 减 获取元素的在当前可视区域的位置

4.给放大镜框添加位置 就是鼠标在元素内的位置这一步就达到了放大镜框跟这鼠标走

5.给大图片添加 top left值 就是偏移量

e ==> js中的 event
获取鼠标在元素内的位置

(1).获取鼠标相对于文档的位置
(2).然后在获取元素的在当前可视区域的位置
(3).鼠标在元素内的位置 == 鼠标相对于文档的位置 减 获取元素的在当前可视区域的位置
因为上面css样式中写入的 大图片是小图片的2倍 所以这里的偏移变应该也是2倍

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

jQuery 相关文章推荐
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现增删改查
Dec 22 #jQuery
jQuery实现本地存储
Dec 22 #jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
jQuery+ajax实现文件上传功能
Dec 22 #jQuery
jQuery实现动态向上滚动
Dec 21 #jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
You might like
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python+django实现文件上传
2016/01/17 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
公证委托书
2014/08/01 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
入党转正介绍人意见
2015/06/03 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang