html 放大镜

最新推荐文章于 2023-08-10 11:14:43 发布

Violet丶Evergarden

最新推荐文章于 2023-08-10 11:14:43 发布

阅读量515

点赞数

本文链接：https://blog.csdn.net/Vollerei/article/details/103712475

版权

HTML 部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/tools.js"></script>
    <script type="text/javascript" src="js/move.js"></script>
</head>

<body>

    <div class="wrap">
        <div class="biger" id="biger"></div>
        <div class="imgs">
            <div class="main" id="main">
                <div class="mask" id="mask"></div>
            </div>
            <ul class="smaller" id="smaller"></ul>
        </div>
    </div>

</body>

</html>

CSS部分

body,
ul {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.wrap {
    position: relative;
    top: 100px;
    left: 100px;
    width: 400px;
    height: 492px;
}

.imgs {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.main {
    position: relative;
    overflow: hidden;
    padding: 4px;
    width: 390px;
    height: 390px;
    border: 1px solid #dadada;
}

.smaller {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 82px;
    margin-top: 10px;
}

.smaller li {
    position: relative;
    float: left;
    padding: 2px;
    width: 64px;
    height: 64px;
    border: 2px solid #000;
    margin-left: 10px;
    cursor: pointer;
}

.smaller li:first-child {
    margin-left: 0;
}

.smaller .current {
    border-color: #ff6a00;
}

.biger {
    position: absolute;
    overflow: hidden;
    display: none;
    left: 410px;
    width: 400px;
    height: 400px;
}

.mask {
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: url('../images/mask-bg.png') repeat;
    cursor: crosshair;
}

.biger img {
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
}

JS 部分

window.onload = function() {
    var biger = document.getElementById('biger');
    var main = document.getElementById('main');
    var smaller = document.getElementById('smaller');
    var mask = document.getElementById('mask');
    var wrap = biger.parentNode;
    var imgArr = [
        { "path": "images/banner1.jpg" },
        { "path": "images/banner2.jpg" },
        { "path": "images/banner3.jpg" },
        { "path": "images/banner4.jpg" },
        { "path": "images/banner5.jpg" }
    ];
    var imgSum = imgArr.length;
    if (imgSum > 5) {
        imgSum = 5;
    }
    for (var i = 0; i < imgSum; i++) {
        var lis = document.createElement('li');
        var imgs = document.createElement('img');
        imgs.src = imgArr[i].path;
        lis.appendChild(imgs);
        smaller.appendChild(lis);
    }
    var mainImg = document.createElement('img');
    var bigImg = document.createElement('img');
    var liArr = smaller.children;
    bigImg.src = mainImg.src = liArr[0].children[0].src;
    main.insertBefore(mainImg, mask);
    biger.appendChild(bigImg);
    var bigPic = biger.children[0];
    liArr[0].className = 'current';
    for (var i = 0; i < liArr.length; i++) {
        liArr[i].index = i;
        liArr[i].onclick = function() {
            this.className = 'current';
            bigPic.src = main.children[0].src = this.children[0].src;
            for (var j = 0; j < liArr.length; j++) {
                if (this != liArr[j]) {
                    liArr[j].removeAttribute('class');
                    liArr[j].removeAttribute('className');
                }
            }
        }
    }
    main.onmouseenter = function() {
        mask.style.display = 'block';
        biger.style.display = 'block';
    }
    main.onmouseleave = function() {
        mask.style.display = 'none';
        biger.style.display = 'none';
    }
    main.onmousemove = function(e) {
        var e = e || window.event;
        var pagex = e.pageX || scroll().left + e.clientX;
        var pagey = e.pageY || scroll().top + e.clientY;
        pagex = pagex - wrap.offsetLeft - mask.offsetWidth / 2;;
        pagey = pagey - wrap.offsetTop - mask.offsetHeight / 2;
        if (pagex < 0) {
            pagex = 0;
        }
        if (pagey < 0) {
            pagey = 0;
        }
        if (pagex > main.offsetWidth - mask.offsetWidth) {
            pagex = main.offsetWidth - mask.offsetWidth;
        }
        if (pagey > main.offsetHeight - mask.offsetHeight) {
            pagey = main.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = pagex + 'px';
        mask.style.top = pagey + 'px';
        var scale = (bigPic.offsetWidth - biger.offsetWidth) / (main.offsetWidth - mask.offsetWidth);
        var xx = pagex * scale;
        var yy = pagey * scale;
        bigPic.style.left = -xx + 'px';
        bigPic.style.top = -yy + 'px';
    }
}

Violet丶Evergarden

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 放大镜

HTML 部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/st...
复制链接

扫一扫