js图片放大镜特效代码

 1 <script language="JavaScript">

 2 <!--

 3 var srcX = 1024; //原图长宽

 4 var srcY = 768;

 5 var bigX = 500; //原比例预览大小,可以设置成任意大小

 6 var bigY = 300;

 7 var smallX = 256; //缩略图大小,要与原大小成比例

 8 var smallY = 192;

 9 var viewX = bigX / srcX * smallX; //预览范围

10 var viewY = bigY / srcY * smallY;

11 var bl = srcX / smallX;//缩小比例

12 var border = 8; //边框

13 window.onload=function (){

14     bigbox.style.borderWidth=border;

15     bigbox.style.width=bigX+border*2;

16     bigbox.style.height=bigY+border*2;

17     smallpic.width=smallX;

18     smallpic.height=smallY;

19     view.style.width=viewX;

20     view.style.height=viewY;

21     smallbox.style.borderWidth=border;

22     if (window.event){

23         smallbox.style.width=smallpic.offsetWidth+border*2;

24         smallbox.style.height=smallpic.offsetHeight+border*2;

25     }else{

26         smallbox.style.width=smallpic.offsetWidth;

27         smallbox.style.height=smallpic.offsetHeight;

28     }

29     move(event);

30 }

31 function move(e){

32     var e = window.event?window.event:e;

33     var iebug = 0;

34     if (window.event){

35         var vX = e.offsetX - viewX/2;

36         var vY = e.offsetY - viewY/2;

37     }else{

38         var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;

39         var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;

40         iebug = 2;

41     }

42     if (vX < 0) vX = 0;

43     if (vY < 0) vY = 0;

44     if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;

45     if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;

46     view.style.left = vX + smallbox.offsetLeft + border;

47     view.style.top = vY + smallbox.offsetTop + border;

48     bigbox.style.backgroundPosition= - vX * bl + " " + -vY * bl;

49 }

50 //-->

51 </script>

52 

53 <style type="text/css">

54 <!--

55 *{padding:0;margin:0}

56 img{display:block;}

57 #smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}

58 #bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;background:url('/upload/20071130224657571.jpg') no-repeat;}

59 #view{border:1px #ddd solid;width:0px;height:0px;position:absolute}

60 .head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}

61 //-->

62 </style>

63 <div class="head">图片放大效果</div>

64 <div id="smallbox"><img id="smallpic" src="/upload/20071130224657571.jpg" border="0" onmousemove="move(event)"></div>

65 <div id="bigbox"></div>

66 <div id="view"></div>

代码最终的效果如下图：