【jquery选择器】基于jquery商城图片放大镜特效代码

【www.bbyears.com--jquery】

代码如下所示

$(function() {
    gallery();
    //商品图片放大镜
    var bigWidth = $(".big_view").width(),        //选择器宽度
        bigHeight = $(".big_view").height(),    //选择器高度
        midWidth = $("#midimg").width(),        //图片容器宽度
        midHeight = $("#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" });
        viewImgWidth = $(".view_img img").outerWidth();
        viewImgHeight = $(".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插件我们需要下载这里不提供。

本文来源：http://www.bbyears.com/wangyezhizuo/97692.html