放大镜二：大图的移动

Posted 2020-10-26 山上有风景

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了放大镜二：大图的移动相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="jquery.js"></script>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .outer{
        margin-left: 250px;
        margin-top: 250px;
        width:311px;
        height: 207px;
        position: relative;
        border:5px dashed lawngreen;
    }
    .float{
        height:150px;
        width:150px;
        background-color: darkgray;
        opacity: 0.5;
        position: absolute;
    }
    .outer .small_box{
        height:207px;
    }
    .outer .big_box{
        position: absolute;
        top:-5px;
        left:321px;
        border: 5px dashed darkorange;
        width: 300px;
        height: 300px;
        overflow: hidden;
    }
    .outer .big_box img{
        position: absolute;
    }
    .hide{
        display: none;
    }
</style>
<body>
    <div class="outer">
        <div class="small_box">
            <div class="float hide">
            </div>
            <img src="small.jpg"/>
        </div>
        <div class="big_box hide">
            <img src="big.jpg"/>
        </div>
    </div>
</body>
</html>
<script>
    $(".small_box").mouseover(function(){
        $(".float").removeClass(‘hide‘);
        $(".big_box").removeClass("hide");
    })
    $(".small_box").mouseout(function(){
        $(".float").addClass(‘hide‘);
        $(".big_box").addClass("hide");
    })
    $(".small_box").mousemove(function (e) {
        //防止其获取坐标出错
        var _event=e || windows.event;

        //图片所在文档的偏移位置
        var small_box_offset_top=$(".small_box").offset().top;
        var small_box_offset_left=$(".small_box").offset().left;
        //图片框的大小
        var small_box_height=$(".small_box").height();
        var small_box_width=$(".small_box").width();
        //遮罩层的大小，取一半，为后面遮罩层四边和鼠标做准备
        var float_height=$(".float").height()/2;
        var float_width=$(".float").width()/2;

        //面板可移动面积：只有中间区域，边界距离为面板的一半是无法移动的
        //判断时将鼠标坐标转换到面板边界，然后与小照片相比

        //鼠标为遮罩层的中心，获取遮罩层的四边，以便限制移动
        var mouse_left=_event.clientX-float_width;
        var mouse_top=_event.clientY-float_height;
        var mouse_right=_event.clientX+float_width;
        var mouse_bottom=_event.clientY+float_height;

        //遮罩层应该移动的距离
        var move_left=mouse_left-small_box_offset_left;
        var move_top=mouse_top-small_box_offset_top;

        if(mouse_top<=small_box_offset_top)
            move_top=0;
        if(mouse_bottom>small_box_offset_top+small_box_height)
            move_top=small_box_height-float_height*2;
        if(mouse_left<=small_box_offset_left)
            move_left=0;
        if(mouse_right>small_box_offset_left+small_box_width)
            move_left=small_box_width-float_width*2;

        $(".float").css(‘left‘,move_left+‘px‘);
        $(".float").css(‘top‘,move_top+‘px‘);
        //大图移动
        //大小图比例获取   2:1  这是大小图片之比
        var x_scan=$(‘.big_box img‘).height()/small_box_height;
        var y_scan=$(".big_box img").width()/small_box_width;

        //比例另外获取方法：    这是大小框可移动长度之比（更适用大多数情况）
        var x_scan=($(‘.big_box img‘).height()-$(".big_box").height())/(small_box_height-float_height*2);
        var y_scan=($(".big_box img").width()-$(".big_box").width())/(small_box_width-float_width*2);

        //大小图的移动是相对的，成倍数的
        $(".big_box img").css(‘top‘,-move_top*x_scan+‘px‘);
        $(".big_box img").css(‘left‘,-move_left*y_scan+‘px‘);
    })
</script>

以上是关于放大镜二：大图的移动的主要内容，如果未能解决你的问题，请参考以下文章