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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-2.1.4.min.js"></script>

    <style>
        body,html{margin: 0;padding: 0;}
        #image{width:448px;height: 332px;background:url(1.jpg);position: relative;overflow: hidden;}
        #mouse{border:1px solid #000;background:rgba(0,0,0,0.3);width:50px;height: 50px;display: none;position: absolute;}

        #box{width:150px;height: 150px;border: 1px solid #000;display: none;}
    </style>
</head>
<body>
    <div id="image">
        <div id="mouse"></div>
    </div>

    <div id="box"></div>
    
</body>
<script>
// var  num=2;  //倍數(shù)
// $('#image').hover(function(){
//              //鼠標(biāo)移入  div顯示出來，  并給#box設(shè)置背景圖、和放大倍數(shù)
//  $('#mouse').show();
//  $('#box').show().css({
//      "background":'url(1.jpg)',
//      "background-repeat":"no-repeat",
//      "background-size":`${448*num}px ${332*num}px`//放大倍數(shù)，不能用百分比放大
//  });

// },function(){
//  $('#mouse').hide();
//  $('#box').hide();
// })

// $('#image').mousemove(function(event){
//   //event.pageX-$('#image').offset().left    代表    event.offsetX
//   //代表屏幕的x軸-大div的左距離，也就是藍(lán)色線
//   var x=event.pageX-$('#image').offset().left;
//   var y=event.pageY-$('#image').offset().top;
//  $('#mouse').css({
//        //給鼠標(biāo)上的灰色框設(shè)置位置， -25是要讓鼠標(biāo)在灰色框中間
//          'left' : x-25+'px', 
//          "top"  : y-25+'px'
//  })
//  $('#box').css({
//      //設(shè)置box里背景圖的位置， num代表放大的倍數(shù) ，
//      // +75 是因?yàn)?要讓放大的圖片在box的中間
//      'background-position-x': -x*num+75+'px',
//      'background-position-y': -y*num+75+'px'
//  })
// })



</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
禁止轉(zhuǎn)載，如需轉(zhuǎn)載請(qǐng)通過簡信或評(píng)論聯(lián)系作者。

友情鏈接更多精彩內(nèi)容