abstract：html代碼<div id="normal">     <img src="static/images/fan.jpg" alt="">     <div id="show&quo

html代碼

<div id="normal">
    <img src="static/images/fan.jpg" alt="">
    <div id="show"></div>
</div>
<div id="big">
    <img src="static/images/fan.jpg" alt="">
</div>

css代碼

<style type="text/css">
    *{margin:0;padding: 0;}
    #normal{width: 450px;height: 450px;border:1px solid #000000;position: fixed;top:20px;left:20px;}
    #normal img{width: 100%;height: 100%;}
    #show{width:150px;height:150px;background: #000000;opacity: 0.2;position: absolute;display: none;}
    #big{width:450px;height: 450px;border:1px solid #000000;position: relative;top:20px;left:490px;overflow: hidden;display: none;}
    #big img{width: 1350px;height: 1350px;position: absolute;}
</style>

js代碼

<script type="text/javascript">
    $(function(){
        $('#normal').mouseover(function(){
            $('#show').show();
            $('#big').show();
            $(this).mousemove(function(yd){
                //獲取鼠標的當前位置
                var mx = yd.pageX;
                var my = yd.pageY;
                //獲取原圖窗口距離文檔的偏移位置
                var ox = $('#normal').offset().top;
                var oy = $('#normal').offset().left;
                //計算鼠標的相對位置
                var mpx = mx-ox;
                var mpy = my-oy;
                //給入小框的移動距離
                $('#show').css({
                   'left':mpx-$('#show').width()/2+'px',
                   'top':mpy-$('#show').height()/2+'px'
                });
                //獲取小框相對于父元素的偏移位置
                var showOffsetX = $('#show').position().left;
                var showOffsetY = $('#show').position().top;
                //console.log(mx+'~'+ox+'~'+showOffsetX);
                //計算小框的最大偏移位置
                var maxOffsetX = $(this).width()-$('#show').width();
                var maxOffsetY = $(this).height()-$('#show').height();

                //左
                if(showOffsetX<=0){
                    $('#show').css('left','0px');
                }
                //右
                if(showOffsetX>=maxOffsetX){
                    $('#show').css('left',maxOffsetX+'px');
                }
                //上
                if(showOffsetY<=0){
                    $('#show').css('top','0px');
                }
                //下
                if(showOffsetY>=maxOffsetY){
                    $('#show').css('top',maxOffsetY+'px');
                }
                //獲取小框重新計算后相對于父元素的偏移位置
                showOffsetX = $('#show').position().left;
                showOffsetY = $('#show').position().top;
                $('#big').find('img').css({
                    left:-showOffsetX*3+'px',
                    top:-showOffsetY*3+'px'
                });
            });
        });
        $('#normal').mouseout(function(){
            $('#show').hide();
            $('#big').hide();
        });
    })
</script>

放大鏡圖片的寬高/展示圖片的寬高 = 放大鏡的寬高/放大鏡區(qū)域的寬高

效果圖

Correcting teacher：韋小寶Correction time：2018-12-11 09:11:13
Teacher's summary：恩！寫的很不錯！這個效果在各種商城項目中使用的最為頻繁！課后還要記得多多練習?。?