JS实现放大镜效果

Posted 2020-10-11 Scar007

tags:

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

注意：里边的两张图片(一大一小)可以自己添加，JQ采用jquery-1.11.3.js版，也可自行调换。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery放大镜</title>
    <link rel="stylesheet" href="css/reset.min.css"/>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div class="wrapper">
    <div class="small">
        <img src="img/1.jpg" alt=""/>
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="img/2.jpg" alt=""/>
    </div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/index.js"></script>
</body>
</html>

CSS代码：

@charset "UTF-8";
.wrapper{
    width: 800px;
    margin: 50px auto;
    position: relative;
}
.wrapper .small{
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 350px;
    border: 1px solid #000000;
    box-shadow: 3px 3px 5px #aaa;
}
.wrapper .small img{
    width: 100%;
    height: 100%;
}
.wrapper .small .mask{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background-color: #000000;
    opacity: .4;
    cursor: move;
}

.wrapper .big{
    display: none;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 355px;
    border: 1px solid #000000;
    box-shadow: 3px 3px 5px #aaa;
}
.wrapper .big img{
    position: absolute;
    width: 800px;
    height: 800px;
    top: 0;
    left: 0;
}

reset.min.css文件：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td{margin:0;padding:0}body{font-size:12px;font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}ul,ol{list-style:none}a{text-decoration:none;background-color:transparent}a:hover,a:active{outline-width:0;text-decoration:none}table{border-collapse:collapse;border-spacing:0}hr{border:0;height:1px}img{border-style:none}img:not([src]){display:none}svg:not(:root){overflow:hidden}html{-webkit-touch-callout:none;-webkit-text-size-adjust:100%}input,textarea,button,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]),video:not([controls]){display:none;height:0}progress{vertical-align:baseline}mark{background-color:#ff0;color:#000}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,select,textarea{font-size:100%;outline:0}button,input{overflow:visible}button,select{text-transform:none}textarea{overflow:auto}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.clear:after{display:block;height:0;content:"";clear:both}

JS代码：

/**
 * Created by 35107 on 2017/5/8.
 */
$(function () {
    var smallL, smallT, minL = 0, minT = 0, maxL, maxT;
    var $wrapper = $(‘.wrapper‘),
        $small = $wrapper.children(‘.small‘),
        $mask = $small.children(‘.mask‘),
        $big = $wrapper.children(‘.big‘),
        $curImg = $small.children(‘img‘),
        $bigImg = $big.children(‘img‘);
    var multiple = 2 / 3, n = null,
        maskW = $curImg.width() * multiple,
        maskH = $curImg.height() * multiple,
        bigW = $bigImg.width() * multiple,
        bigH = $bigImg.width() * multiple;
    $mask.css({width: maskW, height: maskH});
    $big.css({width: bigW, height: bigH});

    $small.on({
        mouseenter: function (e) {
            $mask.css(‘display‘, ‘block‘);
            $big.css(‘display‘, ‘block‘);
            setPos(e);
        },
        mousemove: function (e) {
            setPos(e);
        },
        mouseleave: function () {
            $mask.css(‘display‘, ‘none‘);
            $big.css(‘display‘, ‘none‘);
        }
    });


    function setPos(e) {
        if (!smallL) {
            smallL = $small.offset().left;
            smallT = $small.offset().top;
            maxL = $small.innerWidth() - maskW;
            maxT = $small.innerHeight() - maskW;
            n = ($bigImg.width() - bigW ) / maxL;
        }


        var curL = e.clientX - smallL - maskW / 2,
            curT = e.clientY - smallT - maskH / 2;
        curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
        curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
        $mask.css({left: curL, top: curT});
        $bigImg.css({left: -curL * n, top: -curT * n})
    }

    function calculatedWidth() {

    }
});

以上是关于JS实现放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章