当前位置:首页 > 移动互联网 > jquery商城图片放大镜特效

jquery商城图片放大镜特效

jquery商城图片放大镜特效

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

1 $(function() {
2     gallery();
3     //商品图片放大镜
4     var bigWidth = $('.big_view').width(),        //选择器宽度
5         bigHeight = $('.big_view').height(),    //选择器高度
6         midWidth = $('#midimg').width(),        //图片容器宽度
7         midHeight = $('#midimg').height(),        //图片容器高度
8         imgLeft = $('#midimg').offset().left,    //左边距离
9         imgTop = $('#midimg').offset().top,        //顶部距离
10         viewImgWidth = viewImgHeight = height = null;
11     $('#midimg, .big_view').bind({
12         mousemove:function(e) {
13             $('.view_img').html('<img src="'+$('#midimg').attr('src')+'" width="800" height="800" />');
14             fixedPosition(e);
15             e.stopPropagation();
16         },
17         mouseout:function(e) {
18             $('.big_view').hide();
19             $('.i-box').css({'zIndex':1});
20             $(".view_img").hide();
21             e.preventDefault();
22         }
23     });
24     function fixedPosition(e) {
25         if (e == nullreturn;
26         X = e.pageX - imgLeft - bigWidth / 2;
27         Y = e.pageY - imgTop - bigHeight / 2;
28         X = X < 0 ? 0 : X;
29         Y = Y < 0 ? 0 : Y;
30         X = X > midWidth - bigWidth ? midWidth - bigWidth : X;
31         Y = Y > midHeight - bigHeight ? midHeight - bigHeight : Y;
32         $('.big_view').css({ 'display' 'block''left': X+'px''top': Y+'px' });
33         viewImgWidth = $('.view_img img').outerWidth();
34         viewImgHeight = $('.view_img img').height();
35         var scrollX = X * viewImgWidth / midWidth;
36         var scrollY = Y * viewImgHeight / midHeight;
37         $(".view_img img").css({ "left": scrollX * -1, "top": scrollY * -1 });
38         $(".view_img").show();
39         $('.i-box').css({'zIndex':-1});
40     }
41     $('.gallery_list .gallery_a img').mouseover(function() {
42         $('.gallery_list .gallery_a img').removeClass('cur');
43         $(this).addClass('cur');
44         var obj = new Image();
45         obj.src = $(this).attr('data-title');
46         obj.onload = function() {
47             $('#midimg').attr('src', obj.src);
48         }
49     });
50     $('.g-list .group-list').css('width',$('.g-list .group-list dl').size()*136+'px');
51 });
52 //相册切换
53 function gallery() {
54     var lspeeds;
55     var rspeeds;
56     var dw = $('.gallery_a img').size()*62;
57     $('.gallery_a').css({'width' : dw+'px'});
58     $('.gallery_list .gallery_l').bind({
59         mousedown:function() {
60             lspeeds = setInterval(function() {
61                     if (parseInt($('.gallery_a').css('left')) < 0) {
62                         $('.gallery_a').css({'left':(parseInt($('.gallery_a').css('left'))+2)+'px'});
63                     }
64             },1);
65         },
66         mouseup:function() { clearTimeout(lspeeds); }
67     });
68     $('.gallery_list .gallery_r').bind({
69         mousedown:function() {
70             rspeeds = setInterval(function() {
71                 if (parseInt($('.gallery_a').css('left')) > $('.gallery_c').width()-$('.gallery_a').width()) {
72                     $('.gallery_a').css({'left':(parseInt($('.gallery_a').css('left'))-2)+'px'});
73                 }
74             }, 1);
75         },
76         mouseup:function() { clearTimeout(rspeeds); }
77     });
78 }