基于jquery商城图片放大镜特效代码

代码如下所示

$(function() {
    gallery();
    //商品图片放大镜
    var big.big_view').width(),        //选择器宽度
        big.big_view').height(),    //选择器高度
        mid#midimg').width(),        //图片容器宽度
        mid#midimg').height(),        //图片容器高度
        imgLeft = $('#midimg').offset().left,    //左边距离
        imgTop = $('#midimg').offset().top,        //顶部距离
        viewImgWidth = viewImgHeight = height = null;
    $('#midimg, .big_view').bind({
        mousemove:function(e) {
            $('.view_img').html('');
            fixedPosition(e);
            e.stopPropagation();
        },
        mouseout:function(e) {
            $('.big_view').hide();
            $('.i-box').css({'zIndex':1});
            $(".view_img").hide();
            e.preventDefault();
        }
    });
    function fixedPosition(e) {
        if (e == null) return;
        X = e.pageX - imgLeft - bigWidth / 2;
        Y = e.pageY - imgTop - bigHeight / 2;
        X = X < 0 ? 0 : X;
        Y = Y < 0 ? 0 : Y;
        X = X > midWidth - bigWidth ? midWidth - bigWidth : X;
        Y = Y > midHeight - bigHeight ? midHeight - bigHeight : Y;
        $('.big_view').css({ 'display' : 'block', 'left': X+'px', 'top': Y+'px' });
        viewImg.view_img img').outerWidth();
        viewImg.view_img img').height();
        var scrollX = X * viewImgWidth / midWidth;
        var scrollY = Y * viewImgHeight / midHeight;
        $(".view_img img").css({ "left": scrollX * -1, "top": scrollY * -1 });
        $(".view_img").show();
        $('.i-box').css({'zIndex':-1});
    }
    $('.gallery_list .gallery_a img').mouseover(function() {
        $('.gallery_list .gallery_a img').removeClass('cur');
        $(this).addClass('cur');
        var obj = new Image();
        obj.src = $(this).attr('data-title');
        obj.onload = function() {
            $('#midimg').attr('src', obj.src);
        }
    });
    $('.g-list .group-list').css('width',$('.g-list .group-list dl').size()*136+'px');
});
//相册切换
function gallery() {
    var lspeeds;
    var rspeeds;
    var dw = $('.gallery_a img').size()*62;
    $('.gallery_a').css({'width' : dw+'px'});
    $('.gallery_list .gallery_l').bind({
        mousedown:function() {
            lspeeds = setInterval(function() {
                    if (parseInt($('.gallery_a').css('left')) < 0) {
                        $('.gallery_a').css({'left':(parseInt($('.gallery_a').css('left'))+2)+'px'});
                    }
            },1);
        },
        mouseup:function() { clearTimeout(lspeeds); }
    });
    $('.gallery_list .gallery_r').bind({
        mousedown:function() {
            rspeeds = setInterval(function() {
                if (parseInt($('.gallery_a').css('left')) > $('.gallery_c').width()-$('.gallery_a').width()) {
                    $('.gallery_a').css({'left':(parseInt($('.gallery_a').css('left'))-2)+'px'});
                }
            }, 1);
        },
        mouseup:function() { clearTimeout(rspeeds); }
    });
}

好了上文就是小编给各位整理的一个完整的jquery放大镜效果了，希望　此文章能够对各位有帮助了，注意这个jquery插件我们需要下载这里不提供。