日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
基于jQuery的放大鏡效果

先看一下效果

接下來(lái)是核心代碼

 
 
 
 
    
  
  
  
  
  1. $(function(){  
    2. 
  
  
  
  
  2.     var mouseX = 0;        //鼠標(biāo)移動(dòng)的位置X  
    3. 
  
  
  
  
  3.     var mouseY = 0;        //鼠標(biāo)移動(dòng)的位置Y  
    4. 
  
  
  
  
  4.     var maxLeft = 0;    //最右邊  
    5. 
  
  
  
  
  5.     var maxTop = 0;        //最下邊  
    6. 
  
  
  
  
  6.     var markLeft = 0;    //放大鏡移動(dòng)的左部距離  
    7. 
  
  
  
  
  7.     var markTop = 0;    //放大鏡移動(dòng)的頂部距離  
    8. 
  
  
  
  
  8.     var perX = 0;    //移動(dòng)的X百分比  
    9. 
  
  
  
  
  9.     var perY = 0;    //移動(dòng)的Y百分比  
    10. 
  
  
  
  
  10.     var bigLeft = 0;    //大圖要移動(dòng)left的距離  
    11. 
  
  
  
  
  11.     var bigTop = 0;        //大圖要移動(dòng)top的距離  
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.     //改變放大鏡的位置  
    14. 
  
  
  
  
  14.     function updataMark($mark){  
    15. 
  
  
  
  
  15.         //通過(guò)判斷，讓小框只能在小圖區(qū)域中移動(dòng)          
    16. 
  
  
  
  
  16.         if(markLeft<0){  
    17. 
  
  
  
  
  17.             markLeft = 0;  
    18. 
  
  
  
  
  18.         }else if(markLeft>maxLeft){  
    19. 
  
  
  
  
  19.             markLeft = maxLeft;  
    20. 
  
  
  
  
  20.         }  
    21. 
  
  
  
  
  21.           
    22. 
  
  
  
  
  22.           
    23. 
  
  
  
  
  23.         if(markTop<0){  
    24. 
  
  
  
  
  24.             markTop = 0;  
    25. 
  
  
  
  
  25.         }else if(markTop>maxTop){  
    26. 
  
  
  
  
  26.             markTop = maxTop;  
    27. 
  
  
  
  
  27.         }  
    28. 
  
  
  
  
  28.           
    29. 
  
  
  
  
  29.         //獲取放大鏡的移動(dòng)比例，即這個(gè)小框在區(qū)域中移動(dòng)的比例  
    30. 
  
  
  
  
  30.         perX = markLeft/$(".small").outerWidth();  
    31. 
  
  
  
  
  31.         perY = markTop/$(".small").outerHeight();  
    32. 
  
  
  
  
  32.           
    33. 
  
  
  
  
  33.         bigLeft = -perX*$(".big").outerWidth();  
    34. 
  
  
  
  
  34.         bigTop = -perY*$(".big").outerHeight();  
    35. 
  
  
  
  
  35.           
    36. 
  
  
  
  
  36.         //設(shè)定小框的位置  
    37. 
  
  
  
  
  37.         $mark.css({"left":markLeft,"top":markTop,"display":"block"});  
    38. 
  
  
  
  
  38.     }  
    39. 
  
  
  
  
  39.       
    40. 
  
  
  
  
  40.     //改變大圖的位置  
    41. 
  
  
  
  
  41.     function updataBig(){  
    42. 
  
  
  
  
  42.         $(".big").css({"display":"block","left":bigLeft,"top":bigTop});  
    43. 
  
  
  
  
  43.     }  
    44. 
  
  
  
  
  44.       
    45. 
  
  
  
  
  45.     //鼠標(biāo)移出時(shí)  
    46. 
  
  
  
  
  46.     function cancle(){  
    47. 
  
  
  
  
  47.         $(".big").css({"display":"none"});      
    48. 
  
  
  
  
  48.         $(".mark").css({"display":"none"});  
    49. 
  
  
  
  
  49.     }  
    50. 
  
  
  
  
  50.       
    51. 
  
  
  
  
  51.     //鼠標(biāo)小圖上移動(dòng)時(shí)  
    52. 
  
  
  
  
  52.     function imgMouseMove(event){  
    53. 
  
  
  
  
  53.           
    54. 
  
  
  
  
  54.         var $this = $(this);  
    55. 
  
  
  
  
  55.         var $mark = $(this).children(".mark");  
    56. 
  
  
  
  
  56.             
    57. 
  
  
  
  
  57.         //鼠標(biāo)在小圖的位置  
    58. 
  
  
  
  
  58.         mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;  
    59. 
  
  
  
  
  59.         mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;  
    60. 
  
  
  
  
  60.           
    61. 
  
  
  
  
  61.         //最大值  
    62. 
  
  
  
  
  62.         maxLeft =$this.width()- $mark.outerWidth();  
    63. 
  
  
  
  
  63.         maxTop =$this.height()- $mark.outerHeight();  
    64. 
  
  
  
  
  64.         markLeft = mouseX;  
    65. 
  
  
  
  
  65.         markTop = mouseY;  
    66. 
  
  
  
  
  66.           
    67. 
  
  
  
  
  67.         updataMark($mark);  
    68. 
  
  
  
  
  68.         updataBig();  
    69. 
  
  
  
  
  69.     }  
    70. 
  
  
  
  
  70.       
    71. 
  
  
  
  
  71.       
    72. 
  
  
  
  
  72.     $(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);  
    73. 
  
  
  
  
  73. }) 
    74.

這個(gè)里面主要有二點(diǎn)

1.如何大圖跟隨"放大鏡"的位置，同時(shí)移動(dòng)大圖?

其實(shí)就是用到一個(gè)比例關(guān)系，當(dāng)“放大鏡”移動(dòng)多少比例（是比例，不是具體值），大圖也同時(shí)用這個(gè)比例去乘以大圖的寬和高，就可以算出大圖該移動(dòng)多少距離了；

2.顯示區(qū)域和放大鏡的關(guān)系？

這里的“放大鏡”應(yīng)該和大圖的顯示區(qū)域的比例，應(yīng)該是大圖和小的比例關(guān)系一樣。比如大圖和小圖的比例是1:2，那個(gè)“放大鏡”區(qū)域的大小，和顯示大圖區(qū)域的大小比例也應(yīng)該是1:2，不然“放大鏡”罩住的小圖區(qū)域，和大圖的顯示區(qū)域，所顯示的圖像信息，不能保持一致。（妙味課堂里講的那個(gè)實(shí)例，就是沒(méi)有保持一至）;

在線演示：http://demo.jb51.net/js/2012/mymagnifier/

代碼下載：DEMO下載

原文鏈接：http://www.cnblogs.com/lufy/archive/2012/05/29/2523439.html

【編輯推薦】

  1. jQuery插件之Ajax自動(dòng)完成
  2. jQuery基本事件代碼優(yōu)化
  3. 印象深刻的jQuery手風(fēng)琴效果應(yīng)用
  4. jQuery可多次使用的星級(jí)插件
  5. JQuery插件的開(kāi)發(fā)真的有那么難嗎

文章標(biāo)題：基于jQuery的放大鏡效果
標(biāo)題鏈接：http://www.dlmjj.cn/article/ccehcgc.html