简单的放大镜效果

最新推荐文章于 2020-04-08 20:47:45 发布

微笑小土豆

最新推荐文章于 2020-04-08 20:47:45 发布

阅读量445

点赞数

分类专栏： js小demo 文章标签：简单的放大镜效果

本文链接：https://blog.csdn.net/m781101/article/details/53539825

版权

js小demo 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

简单的放大镜效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>放大镜</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .content {
                margin: 20px auto;
                width: 600px;
            }

            .leftbox {
                position: relative;
                float: left;
                width: 300px;
                height: 300px;
                border: 1px solid skyblue;
                box-sizing: border-box;
                background: url('http://avatar.csdn.net/6/E/4/1_m781101.jpg') no-repeat;
                background-size: cover;
            }

            .mark {
                position: absolute;
                left: 0;
                top: 0;
                width: 100px;
                height: 100px;
                background: sandybrown;
                opacity: 0.6;
                display: none;
            }

            .rightbig {
                position: relative;
                overflow: hidden;
                float: left;
                width: 300px;
                height: 300px;
                border: 1px solid lightsalmon;
                box-sizing: border-box;
                display: none;
            }

            .rightbig img {
                position: absolute;
                left: 0;
                top: 0;
                width: 900px;
                height: 900px;
            }
        </style>
    </head>

    <body>
        <div class="content">
            <div class="leftbox">
                <div class="mark">
                </div>
            </div>
            <div class="rightbig">
                <img src="http://avatar.csdn.net/6/E/4/1_m781101.jpg" />
            </div>

        </div>
    </body>

</html>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var $leftBxo = $('.leftbox')
    var $mark = $('.mark')
    var $rightbig = $('.rightbig')

    $leftBxo.mouseenter(function() {
        $mark.show();
        $rightbig.show()
    }).mousemove(function(e) {
        //首先应该让mark和鼠标走,那就要先确定mark的left和top
        var markX = e.clientX - $leftBxo.offset().left - 50; //减50是为了让鼠标在mark中间显示
        var markY = e.clientY - $leftBxo.offset().top - 50;
        //限定边界，当鼠标移开的时候，mark不跟着跑出来
        var minL = 0,
            maxL = $leftBxo.innerWidth() - $mark.innerWidth(),
            minT = 0,
            maxT = $leftBxo.innerHeight() - $mark.innerHeight()
        markX = markX <= minL ? minL : (markX >= maxL ? maxL : markX)
        markY = markY <= minT ? minT : (markY >= maxT ? maxT : markY)

        $mark.css({
                'left': markX,
                'top': markY
            })
            //让显示大图的容器中的图片根据mark的left和top进行定位
        $rightbig.find('img').css({
            'left': -markX * 3, //要注意这里是负值
            'top': -markY * 3
        })
    }).mouseleave(function() {
        $mark.hide()
        $rightbig.hide()
    })
</script>

为了操作样式方便就用jquery了，用js也挺简单的

微笑小土豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的放大镜效果

简单的放大镜效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>放大镜</title> <style type="text/css"> * { margin: 0; padding: 0;
复制链接

扫一扫