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 29 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 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项目打包方法
2008/02/18 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
JS实现静止元素自动移动示例
2014/04/14 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
jquery实现textarea 高度自适应
2015/03/11 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python创建模块及模块导入的方法
2015/05/27 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
重构Python代码的六个实例
2020/11/25 Python
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
个人查摆剖析材料
2014/02/04 职场文书
法制宣传月活动方案
2014/05/11 职场文书
杜甫草堂导游词
2015/02/03 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
大队委员竞选稿
2015/11/20 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js