Jquery放大镜效果

Jquery放大镜效果

2014-07-30  彭亚欧  1094

在图片上加入放大镜的效果可以给用户带来不一样的体验，丰富网页。所以也被广泛的用于网页中，其实实现放大镜效果难度并不是很大，下面介绍下怎样利用Jquery在网页中实现放大镜的效果。

需要2张图片（一大一小）和2个html div元素，第一个用来加载小图，第二个用来加载小图局部的放大的图片。

css代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#Main {      width :  240px ;      height :  350px ;      border :  1px  solid  #fff ;      background-image :  url (imgS.jpg);      margin :  0  auto ;      margin-top :  100px ; } #child {      position :  absolute ;      width :  100px ;      height :  100px ;      border :  1px  solid  #fff ;      background-image :  url (imgB.jpg);      background-position :  0px  0px ;      cursor :  pointer ; }

html代码：

1 2 3

< div  id = "Main" >      < div  id = "child" ></ div > </ div >

javascript代码(需要引入Jquery文件)：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$(document).ready( function (e) {              var  flag =  false ;              $( "#Main" ).hover( function () {                  flag =  true ;              });              $( this ).mousemove( function (e) {                  if  (flag ==  false )  return ;                  var  x = e.clientX - $( "#Main" ).offset().left-50;                  var  y = e.clientY - $( "#Main" ).offset().top-50;                             if  (x >= 0 && x <= 140) {                      $( "#child" ).css( "margin-left" , x    "px" );                      $( "#child" ).css( "background-positionX" , -x * 2    "px" );                     }                  if  (y >= 0 && y <= 250) {                      $( "#child" ).css( "margin-top" , y    "px" );                      $( "#child" ).css( "background-positionY" , -y * 2   "px" );                  }              },  function () {});          });

这样就实现了一个简单的放大镜效果。