欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)放大鏡效果的思路與代碼

 更新時(shí)間：2021年10月15日 08:58:07   作者：weixin_52112794  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)放大鏡效果的思路與代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

樣式展示：

思路

先準(zhǔn)備兩張圖片,一張小圖,一張大圖，并且兩張圖片有一個(gè)整數(shù)比值

在小圖片的上方設(shè)置一個(gè)放大鏡樣式,背景設(shè)為透明色即可

大圖片外邊套一個(gè)父元素,超出父元素隱藏，大小為只能容納你的放大部分即可
父元素與放大鏡樣式的比值=大圖與小圖的比值 

在小圖片上進(jìn)行鼠標(biāo)移動(dòng)時(shí)獲取鼠標(biāo)的坐標(biāo)，得到鼠標(biāo)當(dāng)前處于小圖片上的坐標(biāo)
根據(jù)對(duì)應(yīng)的比例求出大圖片的坐標(biāo)并移動(dòng)大圖片令放大部分處于父元素可見范圍 

代碼

1.html部分

<div id="box">
        <!-- toBig是放大鏡元素 -->
     <div id="toBig"></div>
        <!-- 小圖片 -->
  <img src="img/05.jpg" id="smallImg" width="800px">
</div>
<div id="beBig">
        <!-- 大圖片,比例為1.5倍數(shù) -->
  <img src="img/05.jpg" id="bigImg" width="1200px">
</div>

2.css樣式部分

 *{
          margin: 0px;
          padding: 0px;
            }    
            #box{
             position: relative;
             float: left;
            }
   #toBig{
    width: 80px;
    height: 80px;
    border: 1px solid gray;
    background-color: transparent;
    position: absolute;
   }
   #beBig{
    float: left;
    overflow: hidden;
    border: 1px solid gray;
    position: relative;
    left: 40px;
    top:325px ;
   }
   #bigImg{
    position: absolute;
   }

3.腳本部分

<script type="text/javascript">
            //獲取小圖片,大圖片,放大鏡元素,大圖片的父元素
   var smallImg=document.querySelector("#smallImg");
   var bigImg=document.querySelector("#bigImg");
   var toBig=document.querySelector("#toBig");
   var beBig=document.querySelector("#beBig");
 
            /*在頁面加載時(shí)就先計(jì)算出小圖片與大圖片的比例*/
            var q=0;
   window.onload=function(){
    q=bigImg.offsetWidth/smallImg.offsetWidth;
                //根據(jù)放大鏡的寬高和比例計(jì)算要顯示放大內(nèi)容的大小
    beBig.style.width = toBig.clientWidth * q +"px";
    beBig.style.height = toBig.clientHeight * q +"px";
   }
            //獲取放大鏡元素的中心，保證鼠標(biāo)在放大鏡中心
   var xCenter=toBig.clientWidth/2;
   var yCenter=toBig.clientHeight/2;
 
            //flag是一個(gè)標(biāo)志,當(dāng)鼠標(biāo)按下時(shí)為true,可以進(jìn)行移動(dòng)
   flag=false;
   toBig.onmousedown = function(){
    flag=true;
   }
   toBig.onmouseup = function(){
    flag=false;
   }
   
   window.onmousemove=function(ev){
    var ev = ev || window.event;
                //flag為true時(shí),放大鏡元素被按下并可以進(jìn)行拖動(dòng)
    if(flag){
                    //獲取鼠標(biāo)當(dāng)前所在位置并計(jì)算除了元素自身外要移動(dòng)的位置
     var mouseX=ev.clientX,mouseY=ev.clientY;
     var trueX=mouseX - xCenter;
 
                    //判斷放大鏡元素是否超出小圖片范圍
     if(trueX < smallImg.offsetLeft){
      trueX = smallImg.offsetLeft;
     }
     if(trueX > smallImg.clientWidth - toBig.offsetWidth){
      trueX = smallImg.clientWidth - toBig.offsetWidth;
     }
     var trueY=mouseY - yCenter;
     if(trueY <= smallImg.offsetTop){
      trueY = smallImg.offsetTop;
     }
     if(trueY > smallImg.clientHeight - toBig.offsetHeight){
      trueY = smallImg.clientHeight - toBig.offsetHeight;
     }
 
                    //小圖片移動(dòng)
     toBig.style.left = trueX + "px";
     toBig.style.top = trueY + "px";
     console.log(trueX,trueY);
     
     // 大圖片要移動(dòng)的位置
     
     bigImg.style.left =-(trueX * q) + "px";
     bigImg.style.top =-(trueY * q) + "px";
    }
   }
   
</script>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論