jquery放大镜效果代码 jQuery 效果 – 滑动

jquery放大镜效果代码

jQuery放大镜效果是一种常见的图片展示效果，它可以让用户在小图上放大预览大图，从而更好地了解图片的细节。实现这个效果的关键是使用jQuery中的hover()方法，它可以监听鼠标在元素上的进入和离开事件，并执行相应的函数。

$(document).ready(function(){
    // 小图片hover时显示大图片
    $(".small-img").hover(function(){
        $(this).next().show(); // 显示大图片
    },function(){
        $(this).next().hide(); // 隐藏大图片
    });

    // 大图片hover时显示放大镜效果
    $(".big-img").hover(function(){
        $(this).prev().show(); // 显示小图片上的放大镜效果

        // 计算小图片和大图片之间的位置差值，并将差值作为参数传递到函数中 
        var x = $(this).offset().left - $(this).prev().offset().left; 
        var y = $(this).offset().top - $(this).prev().offset().top; 

        magnify($(this),x,y);  // 调用magnify()函数，实现放大镜效果

    },function(){  // 鼠标离开时隐藏小图上的放大镜效果 
        $(this).prev().hide();  

    });

    function magnify(obj,x,y){   // 定义magnify()函数，实现放大镜功能 

        obj.mousemove(function(e){   // 监听鼠标在元素上的位置变化事件 

            var mx = e.pageX - x;   // 获取当前光标位于小图中心位置X坐标 
            var my = e.pageY - y;   // 获取当前光标位于小图中心位置Y坐标 

            if (mx < 0) {   // 如果光标X坐标小于0，则将X坐标重新定义为0 
                mx = 0;  
            } else if (mx > obj.width()) {   // 如果光标X坐标大于小图宽度，则将X坐标重新定义为小图宽度 
                mx = obj.width();  
            }  

            if (my < 0) {   // 如果光标Y坐标小于0，则将Y坐标重新定义为0 
                my = 0;  
            } else if (my > obj.height()) {   // 如果光标Y坐标大于小图高度，则将Y坐标重新定义为小图高度 
                my = obj.height();  
            }    

            obj.prev().css({'left':mx,'top':my});     // 根据当前光标位于小图中心位置X、Y坐标来动态赋值left、top来映射出对应的位置     

        });    

    }    																                                                                                                                             });

jQuery 效果 – 滑动