前端編程練習：放大鏡

放大鏡你們都不陌生，此次我就用js寫一個放大鏡

css代碼

• {
  margin: 0;
  padding: 0;
  }

  .kk {
      display: flex;
  }
  
  .box {
      width: 500px;
      height: 400px;
      border: 1px solid red;
      user-select: none;
  }
  
  .box .img img {
      width: 500px;
      height: 400px;
  }
  
  .box .box1 {
      width: 100px;
      height: 100px;
      background-color: rgb(255, 0, 0, 0.8);
      position: absolute;
      top: 0;
      left: 0;
      /* margin-top: -404px; */
  }
  
  .box2 {
      width: 500px;
      height: 400px;
      background: url(11.jpg) no-repeat;
      background-size: 500% 400%;
      border: 1px solid red;
      margin-left: 50px;
  }

css沒啥好說的，你們應該均可以看得懂

html代碼

HTML裏主要三個div,class="img"是放圖片的，class="box1"是圖片上面的紅塊，脫離文檔流浮在img上面，class="box2"是顯示框，具體效果爲：box1的紅塊移動到哪裏，圖片哪的部分就會在box2裏放大

js代碼

獲取元素沒啥說的，主要說的是box.onmousemove裏面的內容
clientX和clientY是爲了得到鼠標的位置 （注：clientX 事件屬性返回當事件被觸發時鼠標指針相對於瀏覽器頁面（或客戶區）的水平座標。clientY同理）
下面的三目運算符是防止紅塊脫離圖片，能夠理解爲紅塊的水平位置大於50小於450，垂直位置大於50小於350
裏面的數據是根據css裏設置的數據計算出來的，好比圖片的寬是500px,紅塊的寬是100px,不過還要考慮到鼠標的位置是紅塊的中間，因此紅塊還要減一半的寬度，也就是50px,這也是三目運算符裏面450數據的來源。
就像以前說的，鼠標位於紅塊的中間，因此不管如何，都要在減去50px,這樣獲得的纔是紅塊最邊緣（距離頂部和左邊）的位置
最後就是設置box2顯示框的狀況，由於紅塊寬高爲100px,圖片的寬高是500px和400px,因此box2顯示框裏紅塊下面覆蓋圖片的寬擴大5倍，高擴大4倍，由於位置的緣由，因此乘的是負再加上寬高的一半

效果圖：