利用jQuery实现图片放大镜

（2）设置这个div的宽高固定为某个值；

（3）设置div的css为超出部分隐藏；

（4）div中嵌套子元素img设置宽高固定为某个值；

（5）通过数学函数计算，移动div的x轴和y轴的滚动条，正好让放大镜显示鼠标在大图的那一块区域。

2. jQuery选择器的分类

5. jQuery中的常见的DOM操作：查找元素、遍历元素、创建元素、插入元素、删除元素、替换元素、复制元素、属性操作、样式操作、HTML操作。&oq=查找元素、遍历元素、创建元素、插入元素、删除元素、替换元素、复制元素、属性操作、样式操作、HTML操作。

四、代码实现

1、在页面布局的DIV下添加三个DIV标签；

2、使用CSS进行美化

l 全局样式

*{
              margin: 0;
              padding: 0;
}

l .small样式

.small{
                     position: relative;
                     height: 400px;
                     margin-left: 5px;
              }

l .small img样式

.small img{
                     height: 360px;
                     width:  620px;
              }

l .box样式

.box{
                     position: absolute;
                     background: rgba(254, 238, 167, .4);
                     left:0;
                     top: 0;
                     display: none;
                     cursor: crosshair;
              }

l .big样式

.big{
                     position:absolute;
                     top: 0px;
                     left:410px;
                     width: 600px;
                     height: 360px;
                     overflow: hidden;
                     display: none;
              }

l .big img样式

.big img{
                     position: relative;
              }

3、使用jQuery实现效果

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

$(&＃39;.box&＃39;).show();
$(&＃39;.big&＃39;).show();

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

var width = $(&＃39;.small img&＃39;).width();
var brush:js;toolbar:false">var Bwidth = $(&＃39;.big img&＃39;).width();
var Bheight = $(&＃39;.big img&＃39;).height();

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

$(&＃39;.small&＃39;).css(&＃39;width&＃39;,width+&＃39;px&＃39;);

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

var Hwidth = ($(&＃39;.big&＃39;).width())/Bwidth*($(&＃39;.small&＃39;).width());
var Hheight = ($(&＃39;.big&＃39;).height())/Bheight*($(&＃39;.small&＃39;).height());

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

$(&＃39;.box&＃39;).css({&＃39;width&＃39;:Hwidth + &＃39;px&＃39;,&＃39;height&＃39;:Hheight + &＃39;px&＃39;});

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

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

五、结果展示

以上就是利用jQuery实现图片放大镜的详细内容，更多请关注其它相关文章！