jquery商城图片放大镜特效

jquery商城图片放大镜特效

最近要做商城,写了个商城图片放大镜的效果,分享出来给大家用。不好的地方请指出。下面直接看效果:

JQUERY图片放大镜

JQUERY图片放大镜

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('<img src="'+$('#midimg').attr('src')+'" width="800" height="800" />');
            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); }
    });
}

yulanxia

分享到:
标签:Jquery,图片放大镜,放大镜,
^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的广告或上面的或右上角的,非常感谢~ ^_^

报歉!评论已关闭.