zoukankan      html  css  js  c++  java
  • jq的图片放大镜效果

        <div class="imgbox">
            <div class="probox">
                <img src="" alt="">
                <div class="hoverbox"></div>
            </div>
            <div class="showbox">
                <img src="" alt="">
            </div>
        </div>
        .imgbox {
        position:relative;
        margin-left:100px;
    }
    .probox {
        width:300px;
        height:300px;
        border:1px solid #000;
    }
    .probox img {
        width:300px;
        height:300px;
        vertical-align:top;
    }
    .showbox {
        display:none;
        position:absolute;
        left:403px;
        top:0;
        width:400px;
        height:300px;
        overflow:hidden;
        border:1px solid #ccc;
    }
    .showbox img {
        position:absolute;
        height:1200px;
        width:1200px;
    }
    .hoverbox {
        display:none;
        position:absolute;
        top:0;
        background:#09f;
        border:1px solid #09f;
        height:75px;
        width:100px;
        cursor:move;
        z-index:10;
    }
    function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, showbox) {
        var moveX = x - l - (h_w / 2);
        var moveY = y - t - (h_h / 2);
        if (moveX < 0) {
            moveX = 0
        }
        if (moveY < 0) {
            moveY = 0
        }
        if (moveX > imgbox.width() - h_w) {
            moveX = imgbox.width() - h_w
        }
        if (moveY > imgbox.height() - h_h) {
            moveY = imgbox.height() - h_h
        }
        var zoomX = showbox.width() / imgbox.width()
        var zoomY = showbox.height() / imgbox.height()
        showbox.css({
            left: -(moveX * zoomX),
            top: -(moveY * zoomY)
        })
        hoverbox.css({
            left: moveX,
            top: moveY
        })
    }
    
    function Zoomhover(imgbox, hoverbox, showbox) {
        var l = imgbox.offset().left;
        var t = imgbox.offset().top;
        var w = hoverbox.width();
        var h = hoverbox.height();
        var time;
        $(".probox img,.hoverbox").mouseover(function(e) {
            var x = e.pageX;
            var y = e.pageY;
            $(".hoverbox,.showbox").show();
            hoverbox.css("opacity", "0.3")
            time = setTimeout(function() {
                Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)
            }, 1)
        }).mousemove(function(e) {
            var x = e.pageX;
            var y = e.pageY;
            time = setTimeout(function() {
                Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)
            }, 1)
        }).mouseout(function() {
            showbox.parent().hide()
            hoverbox.hide();
        })
    }
    $(function() {
        Zoomhover($(".probox img"), $(".hoverbox"), $(".showbox img"));
    })

    引入jq就可以使用了

  • 相关阅读:
    BZOJ 1066 [SCOI2007]蜥蜴 (最大流)
    Codeforces 1092 D2 Great Vova Wall (Version 2) (栈)
    BZOJ 1046 [HAOI2007]上升序列(LIS + 贪心)
    牛客练习赛34 D little w and Exchange(归纳)
    BZOJ 1042 [HAOI2008]硬币购物(完全背包+容斥)
    GTMD并查集!
    2018icpc南京现场赛-G Pyramid(打标找规律+逆元)
    drwxr-xr-x 2 root root 4096 06-29 14:30 Test 分段解释
    Linux里面非常重要的目录
    点击 触发 事件 的 jQuery 写法样式
  • 原文地址:https://www.cnblogs.com/maomao93/p/8418618.html
Copyright © 2011-2022 走看看