飞鸟的一生 2024-10-12 13:59 采纳率: 14.3%
浏览 27

javascript


<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            width: 300px;
            height: 300px;
            float: left;
        }

        .left img {
            display: block;
            width: 300px;
            height: 300px;
            position: relative;
            top: 0px;
            left: 0px;
        }

        .right {
            float: left;
            margin-left: 20px;
        }

        ul li {
            width: 100px;
            height: 100px;
        }

        ul li img {
            width: 100px;
            height: 100px;
        }

        .active {
            border: 1px slateblue solid;
        }

        .large {
            width: 300px;
            height: 300px;
            z-index: 999;
            background-repeat: no-repeat;
            background-size: 300px 300px;
            position: absolute;
            top: 0;
            left: 300px;
            cursor: move;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <img src="../正式开始/图片/可爱头像1.png" alt="">
        </div>
        <div class="right">
            <ul>
                <li><img src="../正式开始/图片/可爱头像1.png" alt=""></li>
                <li><img src="../正式开始/图片/可爱头像2.png" alt=""></li>
                <li><img src="../正式开始/图片/可爱头像3.png" alt=""></li>
            </ul>
        </div>
        <div class="large" style="display: none;">
        </div>
    </div>
    <script>
        const rg = document.querySelector('.right li img')
        const lg = document.querySelector('.left img')
        const rig = document.querySelector('.right ul')
        const large = document.querySelector('.large')
        rig.addEventListener('mouseover', function (e) {
            if (e.target.tagName == 'IMG') {
                const active = document.querySelector('ul .active')
                if (active) active.classList.remove('active')
                e.target.parentNode.classList.add('active')
                lg.src = e.target.src
            }
        })
        let timeID = null
        function show() {
            clearTimeout(timeID)
            large.style.display = 'block'
            large.style.backgroundImage = `url(${lg.src})`
        }
        function hide() {
            const timeID = setTimeout(function () {
                large.style.display = 'none'
            }, 200);
        }
        lg.addEventListener('mouseover', show)
        lg.addEventListener('mouseleave', hide)
        large.addEventListener('mouseover', show)
        large.addEventListener('mouseleave', hide)

    </script>
</body>

</html>

```求解答，为什么large模块点击了不能固定，如果想鼠标经过large模块可以固定应该怎么办
  • 写回答

1条回答 默认 最新

  • 梦境使者 2024-10-12 16:42
    关注
    const timeID = setTimeout(function () {
            large.style.display = 'none'
        }, 200);

    更改为

    timeID = setTimeout(function () {
            large.style.display = 'none'
        }, 200);

    代码可以优化下

    
<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box {
            height: 300px;
            position: relative;
            display: flex;
        }

        .left {
            width: 300px;
            height: 300px;
        }

        .left img {
            display: block;
            width: 300px;
            height: 300px;
            position: relative;
            top: 0px;
            left: 0px;
        }

        .right {
            margin-left: 20px;
            display: flex;
            flex-direction: column;
        }
        .right > img {
            width: 100px;
            height: 100px;
        }

        .active {
            border: 1px slateblue solid;
        }
        .large.show {
            display: block ;
        }

        .large {
            width: 300px;
            height: 300px;
            z-index: 999;
            background-repeat: no-repeat;
            background-size: 300px 300px;
            position: absolute;
            top: 0;
            left: 300px;
            cursor: move;
            border: 1px solid black;
            display: none;
        }
    </style>
</head>

<body>
<div class="box">
    <div class="left">
        <img src="../正式开始/图片/可爱头像1.png" alt="">
    </div>
    <div class="right">
        <img src="../正式开始/图片/可爱头像1.png" alt="">
        <img src="../正式开始/图片/可爱头像2.png" alt="">
        <img src="../正式开始/图片/可爱头像3.png" alt="">
    </div>
    <div class="large">
    </div>
</div>
<script>
    const box = document.querySelector('.box');
    const large = document.querySelector('.large');
    const leftImg = document.querySelector('.left img');
    const right = document.querySelector('.right')
    right.addEventListener('mouseover', function (e) {
        if (e.target.tagName == 'IMG') {
            const active = document.querySelector('.right .active')
            if (active) active.classList.remove('active')
            e.target.classList.add('active')
            leftImg.src = e.target.src
        }
    })
    function hide() {
        if (large.classList.contains('show')) {
            large.classList.remove('show');
        }
    }
    function show() {
        if (!large.classList.contains('show')) {
            large.classList.add('show');
        }
    }
    const mouseover = (e) => {
        const activeE = e.target;
        if (activeE === leftImg || activeE === large) {
            show();
        } else {
            hide()
        }
    }
    const mouseleave = () => {
        hide()
    }
    box.addEventListener('mouseover', mouseover);
    box.addEventListener('mouseleave', mouseleave);
</script>
</body>

</html>
    评论 编辑记录

报告相同问题？

  • JavaScript编程语言入门及核心功能详解
    2024-12-17 17:25
    适合人群：对JavaScript编程语言感兴趣的初学者或有一定编程基础但需要深入了解JavaScript的人。 使用场景及目标：①了解JavaScript的基本概念和发展背景；②掌握JavaScript的变量声明、数据类型和运算符；③学会...
  • Web开发中JavaScript编程语言的全面解析
    2024-12-22 15:10
    内容概要：本文全面介绍了JavaScript语言，从基础知识到高级应用。涵盖JavaScript的背景、基本语法、函数、对象和数组、DOM操作、异步编程、事件处理以及面向对象编程、模块化和正则表达式等内容。详细解释了...
  • 学习JavaScript编程语言的8张思维导图分享
    2020-10-24 11:35
    主要介绍了学习JavaScript编程语言的8张思维导图分享,本文给出了javascript变量、javascript运算符、javascript数组、javascript流程语句、javascript字符串函数、javascript函数基础、javascript基础DOM操作、...
  • JavaScript_Examples:JavaScript 编程语言的一些示例
    2021-06-16 19:53
    一些来自 JavaScript 编程语言的示例。 每个示例都在一个单独的文件夹中。 unit_test_examples -- 包含如何使用 JavaScript 测试框架 QUnit 的演示。 有关更多信息，请参阅博文： ://dublintech.blogspot.ie/2012/...
  • javascript-basic:通过https编码课程学习JavaScript编程语言基础资料
    2021-04-16 11:53
    通过编码课程学习JavaScript编程语言基础材料 课程资料清单 A.基本原理 1. Variabel 2. Data Type 3. Operators 4. IF Statement 5. Switch Case 6. loop 数据结构 1. Object 2. Array 3. Spread Operator 4. ...
  • 脚本编程语言：JavaScript.zip
    2024-08-19 08:24
    史上最全编程语言全套教程，共99门编程语言，包括： 函数式编程语言 壳编程语言 常见编程语言 并行编程语言 数据分析编程语言 数据库查询语言 系统编程语言 脚本编程语言 逻辑编程语言 面向对象编程语言 等所有常见...
  • 常见编程语言：JavaScript.zip
    2024-08-19 08:24
    史上最全编程语言全套教程，共99门编程语言，包括： 函数式编程语言 壳编程语言 常见编程语言 并行编程语言 数据分析编程语言 数据库查询语言 系统编程语言 脚本编程语言 逻辑编程语言 面向对象编程语言 等所有常见...
  • 编程语言+JavaScript+前端开发+框架比较
    2024-03-01 15:47
    编程语言+JavaScript+前端开发+框架比较**：这是一个关于JavaScript编程语言的前端开发的框架比较的资源，适合有一定JavaScript基础的开发者。它对比了目前流行的前端开发框架，如React、Vue、Angular等，分析了它们...
  • 编程语言JavaScript简介
    2021-01-19 17:53
    JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言，大部分情况下是由网页浏览器来执行的。 JavaScript 是美国 Sun 公司的注册商标，目前 Javascript 的最新版本为 1.9 版，遵循 ...
  • 数据分析编程语言：JavaScript.zip
    2024-08-19 08:25
    史上最全编程语言全套教程，共99门编程语言，包括： 函数式编程语言 壳编程语言 常见编程语言 并行编程语言 数据分析编程语言 数据库查询语言 系统编程语言 脚本编程语言 逻辑编程语言 面向对象编程语言 等所有常见...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 10月12日