JavaScript 圖片放大鏡效果

admin發表於2018-11-21
JavaScript

本章節分享一段程式碼例項，它實現了滑鼠懸浮放大鏡效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrap {
  text-align: center;
}
.wrap img {
  width: 60%;
  cursor: crosshair;
}
.loupe {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
  z-index: 999;
  width: 200px;
  height: 200px;
  border: 3px solid #636363;
  border-radius: 50%;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var vh=$(window).height()
  var vw=$(window).width()
  var imgh=$(".wrap img").height()
  var imgw=$(".wrap img").width()
  var beginX=vw*2/10
  var endX=beginX+imgw
  var beginY=(vh-imgh)/2
  var endY=beginY+imgh
  $(".wrap").css("margin-top",beginY+"px")
  //滑鼠經過
  document.addEventListener("mousemove", loupe , false);
  function loupe(e){
    var x,y
    x=e.clientX
    y=e.clientY
    //判斷滑鼠或觸控點在圖片區域，是則顯示放大鏡div層
    if(x>beginX&&x<endX&&y>beginY&&y<endY){
      var mx=100-(x-beginX)/imgw*1920 //1920為原圖片寬度
      var my=100-(y-beginY)/imgh*1200 //1200為原圖片高度
      var bg="url(demo/jQuery/img/pic.jpg) "+mx+"px "+my+"px no-repeat #fff"
      $(".loupe").css("left",x-103+"px").css("top",y-103+"px").css('background',bg)
      $(".loupe").css("visibility","visible")
    }else{
      $(".loupe").css("visibility","hidden")
    }
  }
})
</script>
</head>
<body>
  <div class="loupe"></div>
  <div class="wrap">
    <img src="demo/jQuery/img/pic.jpg">
  </div>
</body>
</html>

上面的程式碼實現了放大鏡效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var vh = $(window).height()，獲取視窗的高度。

（3）.var vw = $(window).width()，獲取視窗的寬度。

（4）.var imgh = $(".wrap img").height()，獲取圖片的高度。

（5）.var imgw = $(".wrap img").width()，獲取圖片的寬度。

（6）.var beginX = (vw - imgw) / 2，由於圖片水平居中的，所以beginX就是圖片區域左邊緣座標。

（7）.var endX = beginX + imgw，圖片區域右邊緣的座標。

（8）.var beginY = (vh - imgh) / 2，由於圖片是垂直居中，所以beginY就是圖片區域上邊緣的座標。

（9）.var endY = beginY + imgh，圖片區域下邊緣的座標。

（10）.$(".wrap").css("margin-top", beginY + "px"),設定圖片是垂直居中，水平居中效果在wrap樣式類中設定的。

（11）.document.addEventListener("mousemove", loupe , false);，註冊事件處理函式。

（12）.function loupe(e){}，事件處理函式，引數是事件物件。

（13）.var x, y，宣告兩個變數，下面會用到。（14）.x = e.clientX，獲取滑鼠指標在客戶區的水平座標並賦值給x。

（15）.y = e.clientY，獲取滑鼠指標在客戶區的垂直座標並賦值給y。

（16）.if(x>beginX&&x<endX&&y>beginY&&y<endY)，判斷滑鼠指標是否在圖片區域。

（17）.var mx = 100 - (x - beginX) / imgw * 1920，獲取背景圖片的x軸方位的座標，原圖的寬度是1920px。使用100減去這個值，目的是將圖片懸浮的地方定位於圓形區域的中心。

（18）.var my = 100 - (y - beginY) / imgh * 1200，和上面是同樣的道理。

（19）.var bg = "url(img/pic.jpg) " + mx + "px " + my + "px no-repeat #fff"，設定背景圖片樣式的字串。

（20）.$(".loupe").css("left", x - 103 + "px").css("top", y - 103 + "px").css('background', bg)，將滑鼠指標定位於圓形區域的中心。

（21）.$(".loupe").css("visibility", "visible")，圓形區域顯示。

（22）.$(".loupe").css("visibility", "hidden")，圓形區域隱藏。

二.相關閱讀:

（1）.css()可以參閱jQuery css()一章節。

（2）.addEventListener()可以參閱addEventListener()一章節。

（3）.clientX可以參閱javascript event.clientX一章節。

相關文章