jQuery放大镜

2021-11-15 19:03:05 阅读：164 来源： 互联网

标签：jQuery function 原图放大镜 top box px left

一、实现原理

方法一：准备一张高像素的大图，当鼠标放到原图上，加载显示大图的对应位置。

首先，需要一个img元素显示原图对象，还需要一个容器作为显示框；显示框里面存放大图对象。当鼠标移动到原图上时，通过对大图进行绝对定位来显示对应的部位，实现类似放大镜的效果。

二、使用mousemove事件的监听方法

$(".small_box").mousemove(function(e){
        // 鼠标位置
        var x=e.offsetX,y=e.offsetY;
        // left  top 小黑框的左上角位置  -100保证让鼠标永远在小黑框的中间
        var left=x-100;
        var top=y-100;
        if (left<0) {
            left=0;
        }
        if (top<0) {
            top=0;
        }
        if (left>200) {
            left=200;
        }
        if (top>200) {
            top=200;
        }
        // 小黑框的位置
        $(this).find(".float_layer").css({
            top:top+"px",
            left:left+"px"
        })

        $(".big_box img").css({
            top:-2 * top + "px",
            left:-2 * left + "px"
        })
    })

实现mousemove事件的监听方法，当鼠标移动到 e 对象中，获取当前鼠标相对坐标位置。

三、相对坐标

$(function(){
    $(".small_box").hover(function(){
        $(this).find(".float_layer").show();  //显示
        $(".big_box").show();
    },function(){
        $(this).find(".float_layer").hide();  //隐藏
    })

标签：jQuery,function,原图,放大镜,top,box,px,left
来源： https://www.cnblogs.com/Nice0115/p/15557734.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery放大镜