利用jQuery实现图片放大镜(2)-木庄网络博客

1) 将放大镜盒子和大图盒子显示出来，代码如下：

1 2	`$('.box').show();` `$('.big').show();`

2) 获取小图片的宽度和高度，代码如下：

1 2	`var` `width = $('.small img').width();` `var` `height=$('.small img'). height ();`

3) 获取大图片的宽度和高度，代码如下：

1 2	`var` `Bwidth = $('.big img').width();` `var` `Bheight = $('.big img').height();`

4) 设置放置小图盒子的宽度，代码如下：

1	`$('.small').css('width',width+'px');`

5) 设置放大镜滑块的大小，代码如下：

1 2	`var` `Hwidth = ($('.big').width())/Bwidth($('.small').width());` `var` `Hheight = ($('.big').height())/Bheight($('.small').height());`

6) 设置放大镜盒子的大小

1	`$('.box').css({'width':Hwidth +` `'px','height':Hheight +` `'px'});`

7) 设置放大镜盒子移动事件

$('.small').mousemove(function(e){
//获取鼠标的位置，代码如下：
var x = e.clientX;
var y = e.clientY;
//设置鼠标在放大镜盒子的中心上，代码如下：
var xx = x - $('.box').width()/2;
var yy = y -$('.box').height()/2;
//设置使放大镜盒子不可以出边框，代码如下：
var maxX = $('.small').width()-$('.box').width();
var maxY = $('.small').height()-$('.box').height();
if (xx<0) {
    xx = 0;
}
if (xx>maxX) {
    xx = maxX;
}
if (yy<0){
    yy = 0;
}
if (yy>maxY){
    yy = maxY;
}
$('.box').css({'left':xx + 'px','top':yy + 'px'});
//查看放大的倍数，及大图的移动距离，放大的图片的移动距离为放大镜盒子移动的距离*放大的倍数。代码如下：
var img_x = xx * ($('.big img').width()/$('.small img').width());
var img_y = yy * ($('.big img').height()/$('.small img').height());
//设置放大的图片的移动。代码如下：
$('.big img').css({'left':-img_x + 'px','top':-img_y + 'px'});
//创建当鼠标移入到小图的盒子时事件，将放大镜盒子和大图盒子进行隐藏。代码如下：
$('.small').mouseout(function(){
       $('.box').hide();
       $('.big').hide();
}) 
})