快捷導(dǎo)航

Javascript 實(shí)現(xiàn)放大鏡效果實(shí)例詳解

更新時(shí)間：2016年12月03日 14:48:10 作者：智軒資本

這篇文章主要介紹了Javascript 實(shí)現(xiàn)放大鏡效果實(shí)例詳解的相關(guān)資料,這里附有實(shí)現(xiàn)實(shí)例代碼，具有參考價(jià)值，需要的朋友可以參考下

Javascript 實(shí)現(xiàn)放大鏡效果

今天做任務(wù)的時(shí)候，有一個(gè)任務(wù)就是讓實(shí)現(xiàn)電商網(wǎng)站常用的放大鏡效果，類似于這樣的放大鏡效果效果，之前并沒(méi)有做過(guò)這種放大鏡效果，剛開(kāi)始的思路是對(duì)圖片進(jìn)行裁剪，但是后來(lái)發(fā)現(xiàn)實(shí)在是難以實(shí)現(xiàn)，于是求助了萬(wàn)能的谷歌，發(fā)現(xiàn)一個(gè)很好的思路就是，展示區(qū)是一小塊可視區(qū)域，給他一個(gè)圖片，超出可視區(qū)域的部分設(shè)為隱藏，有了這個(gè)思路，這個(gè)效果就能夠很好的實(shí)現(xiàn)了，先看一下HTML結(jié)構(gòu)！

　

<div id="pic_wrap">
  <div id="float_box"></div>
  <img src="1.jpg">
</div>
<div id="show">
  <img src="1.jpg" id="big_img">
</div>

　　最外層的兩個(gè)div，分別是商品原始圖片區(qū)域，和放大后的可視區(qū)域！id為float_box的區(qū)域?yàn)榉糯箸R所示的區(qū)域！第一個(gè)img為商品圖片，第二個(gè)img為預(yù)留的放大后的商品！圖片CSS代碼如下！

img {
      width: 250px;
      height: 150px;
    }
    #pic_wrap {
      position: relative;
      width: 250px;
      height: 150px;
    }
    #float_box {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: opacity(alpha: 30);
      opacity: 0.3;
      position: absolute;
      display: none;
    }
    #big_img {
      background-image: url(1.jpg);
      height: 450px;
      width: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    #show {    
      width: 300px;
      height: 300px;
      background-color: white;
      opacity: 1;
      filter: opacity(alpha:1);
      overflow: hidden;
      display: none;
    }

HTML和CSS寫好之后，就要利用js給放大鏡加一些交互效果！

　　第一步，當(dāng)鼠標(biāo)移入的時(shí)候，放大鏡能夠顯示出來(lái)！需要加onmouseover事件。

　　第二步，當(dāng)鼠標(biāo)沒(méi)有移除，且鼠標(biāo)在圖片內(nèi)不停地移動(dòng)，需要加onmousemove事件。

　　第三步，當(dāng)鼠標(biāo)完全移除后，需要加onmouseout事件。

　　第四步，onmouseover事件需要讓放大鏡和可視窗口顯示出來(lái)。

　　第五步，onmousemove事件，讓放大鏡和可視窗口中的圖片同時(shí)移動(dòng)。

　　第六步，onmouseout時(shí)間，讓放大鏡和可是窗口消失！

完整代碼如下：



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    /*body {
      margin: 0;
      padding: 0;
    }*/
    img {
      width: 250px;
      height: 150px;
    }
    #pic_wrap {
      position: relative;
      width: 250px;
      height: 150px;
    }
    #float_box {
      width: 100px;
      height: 100px;
      background-color: green;
      filter: opacity(alpha: 30);
      opacity: 0.3;
      position: absolute;
      display: none;
    }
    #big_img {
      background-image: url(1.jpg);
      height: 450px;
      width: 750px;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    }
    #show {    
      width: 300px;
      height: 300px;
      background-color: white;
      opacity: 1;
      filter: opacity(alpha:1);
      overflow: hidden;
      display: none;
    }
  </style>
</head>
<body>
  <div id="pic_wrap">
    <div id="float_box"></div>
    <img src="1.jpg">
  </div>
  <div id="show">
    <img src="1.jpg" id="big_img">
  </div>
<script src="等比放大鏡.js"></script>
<script type="text/javascript">  
  var pic_wrap = document.getElementById('pic_wrap'),
    float_box = document.getElementById("float_box"),
    show = document.getElementById('show');
    big_img = document.getElementById("big_img");
  //鼠標(biāo)移入事件，讓放大鏡和放大區(qū)顯示！
  pic_wrap.onmouseover = function() {
    float_box.style.display = "block";
    show.style.display = "block";
  }
  //鼠標(biāo)不斷移動(dòng)時(shí)觸發(fā)，實(shí)時(shí)更新放大鏡得到的圖片
  pic_wrap.onmousemove = function(event) {
    floatMove(float_box, pic_wrap, event);
    showPic();
  }
  //鼠標(biāo)移出后，放大鏡和放大區(qū)隱藏
  pic_wrap.onmouseout = function() {
    float_box.style.display = "none";
    show.style.display = "none";
  }  
      //由于offset方法包括邊框，在使用的時(shí)候很容易出現(xiàn)問(wèn)題，所以用style來(lái)實(shí)時(shí)獲取attr！
  function getStyle(obj, attr) {
    if (window.currentStyle) {
      return parseInt(obj.currentStyle[attr]);
    }
    else {
      return parseInt(getComputedStyle(obj,null)[attr]);
    }
  }
  //運(yùn)動(dòng)框架，控制放大鏡在原圖中的位置！
  function floatMove(argu1, argu2, event) {
    var e = event ||window.event;
    var minLeft = getStyle(argu1, "width");
    var maxLeft = getStyle(argu2, "width") - minLeft/2;
    var minHeight = getStyle(argu1, "height");
    var maxHeight = getStyle(argu2, "height") - minHeight/2;
    console.log(maxLeft);
    console.log(maxLeft - minLeft/2);
    if (e.clientX < minLeft/2) {
      float_box.style.left = "0px";//防止放大鏡超出左邊框
    }
    else if (e.clientX > maxLeft) {
      float_box.style.left = getStyle(argu2, "width") - getStyle(argu1, "width") + "px";//防止放大鏡超出右邊框
    }
    else {
      float_box.style.left = event.clientX - minLeft/2 + "px"; //放大鏡完全在圖片內(nèi)時(shí)正常移動(dòng)
    }
    if (e.clientY < minHeight/2) {
      float_box.style.top = "0px"; //防止放大鏡超出上邊框
    }
    else if (e.clientY > maxHeight) {
      float_box.style.top = getStyle(argu2, "height") - getStyle(argu1, "height") + "px"; //防止放大鏡超出下邊框
    }
    else {
      float_box.style.top = event.clientY - minLeft/2 + "px";
    }
  }
  //用來(lái)顯示放大鏡得到的圖片，利用坐標(biāo)計(jì)算！實(shí)時(shí)更新可視區(qū)域
  function showPic() {
    var iCurLeft = getStyle(float_box,"left");
    var iCurTop = getStyle(float_box,"top");
    var a = getStyle(pic_wrap,"width") - getStyle(float_box,"width");
    var b = getStyle(big_img,"width") - getStyle(show,"width");    
    var moveWidth = -(iCurLeft/a)*b;
    big_img.style.left = moveWidth + "px";
    var c = getStyle(pic_wrap,"height") - getStyle(float_box,"height");
    var d = getStyle(big_img,"height") - getStyle(show,"height");
    var moveHigth = -(iCurTop/c)*d;
    big_img.style.top = moveHigth + "px";
  }
</script>
</body>
</html>

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: