利用javascript怎么實現(xiàn)一個放大鏡功能-創(chuàng)新互聯(lián)

本篇文章為大家展示了利用javascript怎么實現(xiàn)一個放大鏡功能，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站制作、建水網(wǎng)絡(luò)推廣、小程序設(shè)計、建水網(wǎng)絡(luò)營銷、建水企業(yè)策劃、建水品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供建水建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：muchs.cn

涉及技術(shù)

onmouseover：當(dāng)鼠標(biāo)指針移動到指定的對象上時發(fā)生
onmouseout：鼠標(biāo)指針移出指定對象時發(fā)生
onmousemove：鼠標(biāo)指針移動時發(fā)生
offsetLeft | offsetTop | offsetWidth | offsetHeight
event.clientX | event.clientY

偏移量與style.left

style.left返回字符串，例如30px，而offsetLeft返回數(shù)字30。
style.left可以讀和寫，offsetLeft是只讀的。如果我們想改變div的位置，我們可以修改style.left.
style.left應(yīng)事先定義，否則值為空。

需要考慮

如何使小畫面上的放大鏡與大圖同步移動
IE兼容性問題

代碼實現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Magnifier Effect</title>
 <style>
 *{
  margin: 0;
  padding: 0;
 }
 #wrap{
  width: 400px;
  height: 255px;
  margin: 50px;
  border: 1px solid #ccc;
  display: block;
  position: relative;
 }
 #small-box{
  position: relative;
  z-index: 1;
 }
 #float-box{
  width: 160px;
  height: 120px;
  position: absolute;
  background-color: #ffffcc;
  border:1px solid #ccc;
  filter: alpha(opacity = 50);
  opacity: .5;
  display: none;
 }
 #mask{
  position: absolute;
  display: block;
  width: 400px;
  height: 255px;
  z-index: 10;
  background-color: #ffffff;
  filter: alpha(opacity = 0);
  opacity: 0;
  cursor: move;
 }
 #big-box{
  position: absolute;
  top: 0;
  left: 460px;
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  z-index: 1;
  display: none;
 }
 #big-box img{
  position: absolute;
  z-index: 5; 
 }
 </style>
</head>
<script>
 // 頁面加載完畢之后執(zhí)行
 window.onload = function(){
 // 獲取父元素wrap, 小盒子,遮罩層, 放大鏡, 大盒子, 大圖片
 var wrap = document.getElementById('wrap');
 var smallBox = document.getElementById('small-box');
 var mask = document.getElementById('mask');
 var floatBox = document.getElementById('float-box');
 var bigBox = document.getElementById('big-box');
 var bigImg = bigBox.getElementsByTagName('img')[0];
 console.log(wrap, smallBox, mask, floatBox, bigBox, bigImg); 

 // 鼠標(biāo)移動到小盒子上時, 放大鏡顯示, 大盒子顯示
 mask.onmouseover = function(){
  floatBox.style.display = 'block';
  bigBox.style.display = 'block';
 }

 // 鼠標(biāo)移出小盒子時, 放大鏡隱藏, 大盒子隱藏
 mask.onmouseout = function(){
  floatBox.style.display = 'none';
  bigBox.style.display = 'none';
 }

 // 添加鼠標(biāo)移動事件
 mask.onmousemove = function(ev){
  // 獲取當(dāng)前鼠標(biāo)移動的位置并考慮IE兼容性
  var _event = ev || window.event;

  // 獲取放大鏡向左移動的距離
  var left = _event.clientX - wrap.offsetLeft - smallBox.offsetLeft - floatBox.offsetWidth / 2;
  var top = _event.clientY - wrap.offsetTop - smallBox.offsetTop - floatBox.offsetHeight / 2;

  // console.log(left, top);

  // 考慮邊界情況
  if(left < 0){
  left = 0;
  }else if(left > (mask.offsetWidth - floatBox.offsetWidth)){
  left = mask.offsetWidth - floatBox.offsetWidth;
  }

  if(top < 0){
  top = 0;
  }else if(top > (mask.offsetHeight - floatBox.offsetHeight)){
  top = mask.offsetHeight - floatBox.offsetHeight;
  }

  floatBox.style.left = left + 'px';
  floatBox.style.top = top + 'px';

  // calculate percentage
  var percentX = left / (mask.offsetWidth - floatBox.offsetWidth);
  var percentY = top / (mask.offsetHeight - floatBox.offsetHeight);

  // calculate displacement of big image, big image has opposite direction of magnifying glass
  bigImg.style.left = -percentX * (bigImg.offsetWidth - bigBox.offsetWidth) + 'px';
  bigImg.style.top = -percentY * (bigImg.offsetHeight - bigBox.offsetHeight) + 'px';

 }
 }
</script>
<body>
 <div id="wrap">
 <div id="small-box">
  <div id="mask"></div>
  <div id="float-box"></div>
  <img src="./img/macbook-small.jpg" alt="smallMac">
 </div>
 <div id="big-box">
  <img src="./img/macbook-big.jpg" alt="bigMac">
 </div>
 </div>
</body>
</html>

文章題目：利用javascript怎么實現(xiàn)一個放大鏡功能-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article6/deiiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、小程序開發(fā)、企業(yè)建站、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容