4.18作业--js

最新推荐文章于 2024-09-14 08:09:14 发布

~无止境

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量123

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/kelouze06/article/details/124259486

版权

这篇博客介绍了如何使用HTML和JavaScript实现三种交互效果：1)鼠标经过元素时改变颜色，离开时还原；2)点击按钮动态替换内容展示图片；3)创建多个div，使它们跟随鼠标移动。通过这些实例，读者可以学习到基本的DOM操作和事件监听技巧。

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

1、编程实现：鼠标经过改变颜色
假设元素原本为红色，鼠标悬停，改为蓝色，鼠标离开，颜色还原

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HWO1</title>
    <style>
        #d {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="d" onmouseover="over(this);" onmouseout="out(this);"></div>
    <script>
        function over(obj) {
            var div = document.getElementById(obj.id);
            div.style.background = "blue";
        }
        function out(obj) {
            var div = document.getElementById(obj.id);
            div.style.background = "red";
        }
    </script>
</body>

</html>

2、编程实现：点击按钮，切换图片（循环添加没想到怎么搞）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HW02</title>
    <style>
        button {
            width: 90px;
            height: 30px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <button onclick="rep();">点击看美女</button>
    <h1 id="h1">窈窕淑女，君子好逑。</h1>

    <script>

        function rep() {
            var h1 = document.getElementById("h1");
            var img = document.createElement("img");
            img.setAttribute("src", "D:/web/girl.jpg");
            img.setAttribute("title", "呵，女人！")
            img.setAttribute("width", "300px")
            img.setAttribute("height", "150px")
            var parent = h1.parentNode;
            parent.replaceChild(img, h1);
        }

    </script>
</body>

</html>

3、编程实现：跟随鼠标—串的效果
即，定义多个div，鼠标移动时，这几个div就跟着鼠标移动

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HW03</title>
    <style>
        #d1 {
            width: 200px;
            height: 200px;
            background-color: black;
            position: absolute;
        }

        #d2 {
            width: 150px;
            height: 150px;
            position: relative;
            top: 25px;
            left: 25px;
            background-color: red;
        }

        #d3 {
            width: 100px;
            height: 100px;
            position: relative;
            top: 25px;
            left: 25px;
            background-color: rebeccapurple;
        }

        #d4 {
            width: 50px;
            height: 50px;
            position: relative;
            top: 25px;
            left: 25px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="d1">
        <div id="d2">
            <div id="d3">
                <div id="d4"></div>
            </div>
        </div>
    </div>
    <script>
        var d1 = document.getElementById("d1")
        document.onmousemove = function (event) {
            window.event;
            var left = event.clientX;
            var top = event.clientY;
            d1.style.left = left + "px";
            d1.style.top = top + "px";
        }
    </script>

</body>

</html>