JQ实现放大镜

作者: Miss_Fairy | 来源:发表于2017-08-14 17:41 被阅读0次

JQ实现放大镜
Jq实现放大镜效果
jQ 放大镜效果
常见tab效果的实现
JS-jQuery
document.ready（）方法的实现原理
瀑布流布局_木桶布局
jq封装插件
11.03 jq选择项获取，动态添加非click事件,判断是否隐
前端小白之jq实现下拉菜单

image.png

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img {
            display: block;
        }
        .smallBox {
            width: 200px;
            height: 200px;
            float: left;
            position: relative;
            margin-left: 100px;
            margin-top: 100px;
            border: 1px solid #ccc;
        }
        .tool {
            width: 50px;
            height: 50px;
            background: #000;
            opacity: 0.4;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
        }
        .smallImg {
            width: 200px;
            height: 200px;
        }
        .smallImg img {
            width: 200px;
            height: 200px;
        }
        .bigBox {
            width: 200px;
            height: 200px;
            overflow: hidden;
            float: left;
            margin-left: 100px;
            position: relative;
            margin-top: 100px;
            border: 1px solid #ccc;
        }
        .bigImg {
            width: 800px;
            height: 800px;
        }
        .bigBox img {
            width: 800px;
            height: 800px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="smallBox">
            <div class="tool"></div>
            <div class="smallImg">
                ![](https://img.haomeiwen.com/i6574542/2481f7bade27f6f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            </div>
        </div>
        <div class="bigBox">
            <div class="bigImg">
                ![](https://img.haomeiwen.com/i6574542/2481f7bade27f6f2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            </div>
        </div>
    </div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('.smallBox').mousemove(function(e){
    var x = e.pageX - $('.smallBox').offset().left - $('.tool').width()/2;
    var y = e.pageY - $('.smallBox').offset().top - $('.tool').height()/2;
    //限制下移动范围
    var maxLeft = $('.smallBox').width() - $('.tool').width();
    var maxTop = $('.smallBox').height() - $('.tool').height();
    if(x <= 0){
        x = 0;
    }
    if(x >= maxLeft){
        x = maxLeft;
    }
    if(y <= 0){
        y = 0;
    }
    if(y >= maxTop){
        y = maxTop;
    }

    $('.tool').css({'left': x,'top':y});
    //算下比例
    var widthNum = $('.bigBox img').width()/$('.smallBox img').width();
    var heightNum = $('.bigBox img').height()/$('.smallBox img').height();
    $('.bigBox img').css({
        'left': -(widthNum*x),
        'top': -(heightNum*y)
    })
})
</script>
</html>