用JavaScript中jQuery編寫放大鏡效果

YKmaster發表於2018-06-23
JavaScriptjQuery
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9     <style>
 10         #big {
 11             width: 400px;
 12             height: 400px;
 13             border: 1px solid black;
 14             overflow: hidden;
 15             display: none;
 16             position: absolute;
 17             background-color: white;
 18             background-image: url(`./image/1.bmp`);
 19             opacity: 0.8;
 20         }
 21 
 22         #small {
 23             width: 350px;
 24             height: 350px;
 25             border: 1px solid black;
 26             background-image: url(`./image/11.bmp`);
 27         }
 28 
 29         #img {
 30             width: 800px;
 31             height: 800px;
 32         }
 33 
 34         #div {
 35             width: 175px;
 36             height: 175px;
 37             background-color: blue;
 38             opacity: 0.5;
 39             position: absolute;
 40             display: none;
 41         }
 42     </style>
 43 </head>
 44 
 45 <body>
 46 
 47     <div id="small">
 48         <div id="div"></div>
 49         <!-- <img src="./image/11.bmp" /> -->
 50     </div>
 51     <div id="img">
 52         <div id="big">
 53             <!-- <img src="./image/1.bmp" /> -->
 54         </div>
 55     </div>
 56     <script src="./jquery-1.12.4.min.js"></script>
 57     <script>
 58         //當滑鼠在圖片上移動時的操作
 59         $(window).on(`load`, function () {
 60             $("#small").on(`mouseenter`, function () {
 61                 let position = $(this).position();//獲取small偏移
 62                 $("#big").css({//大的圖片距離小的圖片的距離
 63                     top: position.top,
 64                     left: position.left + $(this).width() + 80
 65                 }).show();
 66             })
 67       
 68             $("#small").on(`mousemove`, function (e) {//滑鼠在圖片上移動
 69                 let left1 =e.pageX-$(this).offset().left;
 70                 let top1=e.pageY-$(this).offset().top;
 71                 left1=left1-80<0?90:left1;
 72                 top1=top1-80<0?90:top1;
 73                 left1=left1-80>175?263:left1;
 74                 top1=top1-80>175?263:top1;                
 75                 $(`#div`).css({//小方塊顯示
 76                     display: "block",
 77                     left:left1-80,
 78                     top:top1 -80
 79                 })
 80 
 81                 let position = $(this).position();
 82                 //第一種
 83                 //計算滑鼠在圖片上面的偏移座標
 84                 // let X = e.pageX - position.left;
 85                 // let Y = e.pageY - position.top;
 86                 // //定位放大鏡的距離
 87                 // $("#big").scrollTop(Y-100).scrollLeft(X-100);
 88 
 89                 // //第二種
 90                 let x =$("#div").position().left/350*800;
 91                 let y =$("#div").position().top/350*800;
 92                 $("#big").css({
 93                     backgroundPosition:`-${x}px -${y}px`
 94                 })
 95 
 96 
 97             });
 98             $("#small").on(`mouseleave`, function () {//滑鼠移出時
 99                 $("#big").css({
100                     display: "none"
101                 })
102                 $(`#div`).css({//小方塊顯示
103                     display: "none",
104 
105                 })
106             })
107 
108             // console.log($.unique($.merge([1,2],[2,3,4])))
109         })
110     </script>
111 </body>
112 
113 </html>

 

相關文章