js實現放大鏡特效，js放大鏡特效

js實現放大鏡特效，js放大鏡特效

本文執行個體為大家分享了js放大鏡特效的實現代碼，供大家參考，具體內容如下

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css">  *{   margin: 0;   padding: 0;  }  .imgBox{   width: 1000px;   margin: auto;   text-align: center;  }  .small,.large{   font-size: 0;   outline: 1px solid burlywood;   margin: auto;  }  .small{   margin: 20px auto;  }  .large{   /*display: none;*/  }  .small,.small img,.large{   width: 300px;   height: 200px;   overflow: hidden;  }  .large img{   width: 900px;   height: 600px;  }  .small,.large{   position: relative;  }  .mark{   opacity: 0.5;   background-color: #DEB887;   z-index: 55;   width: 100px;   height: 66.666666666px;   display: none;  }  .mark,.large img{   position: absolute;   left: 0;   top: 0;  } </style></head><body> <div class="imgBox">  <div class="small">   <img src="img/img_14.jpg"/>   <div class="mark"></div>  </div>  <div class="large">   <img src="img/img_14.jpg"/>  </div> </div>  <script type="text/javascript">  $(function(){   var $small = $(".small"),    $mark = $(".mark"),    $large = $(".large");   $small.on("mousemove",function(e){// 在滑鼠移到小圖片中顯示出mark    $mark.css("display","block");//    $large.css("display","block");// 擷取mark的一半寬度高度    var hw = $mark.width()/2,     hh = $mark.height()/2;// 擷取滑鼠在當前圖片中的位置    var lf = e.pageX-$small.offset().left-hw,     tt = e.pageY-$small.offset().top-hh;// 擷取mark的想x,y軸位移率    var ix = lf/$small.width(),     iy = tt/$small.height();// 擷取邊緣線    var lb = 1-hw/$small.width()*2,     tb = 1-hh/$small.height()*2;// 計算和邊緣的關係    var ix = ix<lb?ix>0?ix:0:lb,     iy = iy<tb?iy>0?iy:0:tb;// 進行大圖和小圖百分比計算    $mark.css("left",ix*100+"%").css("top",iy*100+"%");    $large.children().css("left",-ix*300+"%").css("top",-iy*300+"%");   }).on("mouseout",function(){// 滑鼠移出後mark隱藏    $mark.css("display","none");//    $large.css("display","none");   })  }) </script></body></html>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。