js动态效果

1、编程实现：鼠标经过改变颜色假设元素原本为红色，鼠标悬停，改为蓝色，鼠标离开，颜色还原<!DOCTYPE html><html lang="zh-CH"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta na

暖暖心语

2588人浏览 · 2022-04-18 23:26:10

暖暖心语 · 2022-04-18 23:26:10 发布

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

<!DOCTYPE html>
<html lang="zh-CH">
<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>移动</title>
    <style>
        #aa{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #bb{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div onmouseover="bb()" onmouseout="aa()" id="aa" ></div>

    <script>
        function aa(){
            var a = document.getElementById("aa");
            a.style.backgroundColor="blue";
        }
        function bb(){
            var a = document.getElementById("aa");
            a.style.backgroundColor="red";
        }
    </script>
</body>
</html>

2、编程实现：点击按钮，切换图片（可以循环一直切换）

<!DOCTYPE html>
<html lang="zh-CH">
<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>切换图片</title>
    <style>
        #a{
            width: 720px;
            height: 1280px;
            background: url('../../day01/img/3.jpg');
        }
    </style>
</head>
<body>
    <button onclick="gogo();">点我</button>
    <img src="../../day01/img/3.jpg" alt="女孩" width="800px" height="1280px" id="im">
    <script>
    var index = 0;
    function gogo(){
        index++;
        if(index==4){
            index=1;
        }
        var im = document.getElementById("im");
        
        im.src = "../../day01/img/"+index+".jpg";
        
    }
    </script>
</body> 
</html>

3、编程实现：跟随鼠标—串的效果
即，定义多个div，鼠标移动时，这几个div就跟着鼠标移动
(代码来源于网络自己尝试理解和修改)

<!DOCTYPE html>
<html lang="zh-CH">
<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>鼠标跟随</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background: #66ccff;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        var move = document.getElementsByTagName('div');
        document.onmousemove = function (e) {

            var GO = e || aevent;//判断鼠标运动情况
            // var OE = false;//判断

            for (var i = move.length - 1; i > 0; i--) {
                move[i].style.left = move[i - 1].style.left;
                move[i].style.top = move[i - 1].style.top;
            }
            //设置0号元素为鼠标位置
            move[0].style.left = GO.clientX + 'px';
            move[0].style.top = GO.clientY + 'px';

            console.log(GO.clientX+","+GO.clientY);//打印鼠标坐标
        }
    </script>
</body>
</html>