放大镜2.0版本

最新推荐文章于 2024-08-25 01:17:37 发布

等儿

最新推荐文章于 2024-08-25 01:17:37 发布

阅读量286

点赞数

文章标签： css3 css javascript

本文链接：https://blog.csdn.net/weixin_44736637/article/details/122368535

版权

本文介绍了一个HTML页面，使用CSS和JavaScript实现了一个带有三种尺寸图片的响应式布局，用户可以通过鼠标操作在小中大图间切换，并实现放大镜效果。核心技术包括flexbox布局、背景图替换和事件监听。

摘要由CSDN通过智能技术生成

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container,
        ul {
            font-size: 0;
        }

        .container {
            width: 900px;
            display: flex;
            flex-wrap: wrap;
        }

        .mid {
            width: 430px;
            height: 430px;
            border: 1px solid;
            position: relative;
        }

        .large {
            width: 430px;
            height: 430px;
            border: 1px solid;
            margin-left: 20px;
        }

        ul {
            list-style: none;
            display: flex;
            margin: 20px 0;
            padding: 0;
        }

        li {
            border: 1px solid;
            margin-right: 10px;
        }

        i {
            display: block;
            width: 231px;
            height: 231px;
            background-color: rgba(0, 255, 0, .3);
            position: absolute;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="mid">
            <i class="none"></i>
        </div>
        <div class="large none"></div>
    </div>
    <ul>
    </ul>

    <script>
        const small_arr = ["../img/放大/下载 (6).jfif", "../img/放大/下载 (7).jfif", "../img/放大/下载 (10).jfif"];
        const middle_arr = ["../img/放大/下载 (4).jfif", "../img/放大/下载 (8).jfif", "../img/放大/下载 (11).jfif"];
        const large_arr = ["../img/放大/下载 (5).jfif", "../img/放大/下载 (9).jfif", "../img/放大/下载 (12).jfif"];

        const mid = document.querySelector(".mid"); // 中图
        const large = document.querySelector(".large"); // 大图
        const ul = document.querySelector("ul");    // ul
        const square = document.querySelector("i"); // 矩形

        // 渲染样式
        function render() {
            ul.innerHTML = small_arr.map((item, index) => `<li><img src='${item}' data-index='${index}'></li>`).join('');
            
            
            mid.style.backgroundImage = `url(${middle_arr[0]})`;
            
            large.style.backgroundImage = `url(${large_arr[0]})`;
        }
        render();

        // 移入小图改图片
        ul.onmouseover = function (event) {
            if (event.target.nodeName == 'IMG') {
                //获取自定义属性的下标
                let index = event.target.dataset.index;
                //对应下标更换中大图的图片路径（背景图）
                mid.style.backgroundImage = `url(${middle_arr[index]})`;
                large.style.backgroundImage = `url(${large_arr[index]})`;
            }
        }

        mid.onmousemove = function (event) {
            // 鼠标文档
            let [mouseClientX, mouseClientY] = [event.clientX, event.clientY];
            let x = mouseClientX - mid.offsetLeft - square.offsetWidth / 2;
            let y = mouseClientY - mid.offsetTop - square.offsetHeight / 2;

            if (x < 0) {
                x = 0;
            }
            if (x > mid.offsetWidth - square.offsetWidth) {
                x = mid.offsetWidth - square.offsetWidth;
            }
            if (y < 0) {
                y = 0;
            }
            if (y > mid.offsetHeight - square.offsetHeight) {
                y = mid.offsetHeight - square.offsetHeight;
            }
            square.style.cssText = `
                left: ${x}px;
                top: ${y}px;
            `;
            large.style.cssText += `
               background-position: ${-x * 1.86}px ${-y * 1.86}px;  
            `;
        }
        //移入放大镜显示
        mid.onmouseenter = function () {
            square.classList.remove('none');
            large.classList.remove('none');
            // square.className = '';
        }
        //移出放大镜隐藏
        mid.onmouseleave = function () {
            square.classList.add('none');
            large.classList.add('none');
        }



    </script>
</body>

</html>

等儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
放大镜2.0版本

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container,
复制链接

扫一扫