jQuery实现产品图放大

jquery 代码

$(document).ready(function() {
    var index = 0;
    $(".but li").mouseover(function() {
        $(this).addClass("once").siblings().removeClass("once");
        index = $(this).index();
        $(".probox img").attr('src', $(this).attr('data'))
        $(".showbox img").attr('src', $(this).attr('kdata'));
    });

    function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, probox) {
        var moveX = x - l - (h_w / 2);
        //鼠标区域距离
        var moveY = y - t - (h_h / 2);
        //鼠标区域距离
        if (moveX < 0) {
            moveX = 0
        }
        if (moveY < 0) {
            moveY = 0
        }
        if (moveX > imgbox.width() - h_w) {
            moveX = imgbox.width() - h_w
        }
        if (moveY > imgbox.height() - h_h) {
            moveY = imgbox.height() - h_h
        }
        //判断鼠标使其不跑出图片框
        var zoomX = probox.width() / imgbox.width()
        //求图片比例
        var zoomY = probox.height() / imgbox.height()

        probox.css({
            left: -(moveX * zoomX),
            top: -(moveY * zoomY)
        })
        hoverbox.css({
            left: moveX,
            top: moveY
        })
        //确定位置

    }
    $(".tablea").find(".box:first").show(); //为每个BOX的第一个元素显示        
    $("#oranger a").on("mouseover", function() { //给a标签添加事件  
        var index = $(this).index(); //获取当前a标签的个数  
        $(this).parent().next().find(".box").hide().eq(index).show(); //返回上一层，在下面查找css名为box隐藏，然后选中的显示  
        $(this).addClass("hover").siblings().removeClass("hover"); //a标签显示，同辈元素隐藏  
    })

    function Zoomhover(imgbox, hoverbox, probox) {
        var l = imgbox.offset().left;
        var t = imgbox.offset().top;
        var w = hoverbox.width();
        var h = hoverbox.height();
        var time;
        $(".showbox img,.hoverbox").mouseover(function(e) {
            var x = e.pageX;
            var y = e.pageY;
            $(".hoverbox,.probox").show();
            hoverbox.css("opacity", "0.3")
            time = setTimeout(function() {
                Zoom(imgbox, hoverbox, l, t, x, y, w, h, probox)
            }, 1)
        }).mousemove(function(e) {
            var x = e.pageX;
            var y = e.pageY;
            time = setTimeout(function() {
                Zoom(imgbox, hoverbox, l, t, x, y, w, h, probox)
            }, 1)
        }).mouseout(function() {
            probox.parent().hide()
            hoverbox.hide();
        })
    }
    $(function() {
        Zoomhover($(".showbox img"), $(".hoverbox"), $(".probox img"));
    })
});