JavaScript连载32-常用的鼠标事件

一、常用的鼠标事件

<body>
    <img src="img/img_05.png" alt="" width="250px">
    <script>
        window.onload = function (ev) {
            var logo = document.getElementsByTagName("img")[0];

            //1.新的事件
            logo.onmouseover = function (e1) {
                console.log("-----");//鼠标进入图片就会触发,也就悬停在图片上
                this.setAttribute("src","img/img_02.png");
            }

            logo.onmouseleave = function (e2) {
                this.setAttribute("src","img/img_05.png");//鼠标离开图片就会触发
            }
        }
    </script>
</body>
</html>

二、侧边的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D32_3_erweimaXianshi</title>
    <style>
        *{
            margin:0;
            padding:0;
            list_style:none;
        }
        #e_coder{
            width:500px;
            height:500px;
            background:url("img/img_05.png") no-repeat;
            position:fixed;
            top:40%;
            left:0;
            cursor:pointer;
        }
        #e_app{
            position:absolute;
            left:50px;
            top:-50px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="e_coder">
        <div id="e_app">
            <img src="img/img_02.png" alt="公众号" width="150">
        </div>
    </div>
    <script>
        window.onload = function (ev1) {
            //1.获取需要的标签
            var e_coder = document.getElementById("e_coder");
            var e_app = document.getElementById("e_app");

            //2.监听鼠标
            e_coder.onmouseover = function (ev2) {
                //2.1改变背景图片
                this.style.background = 'url("img/img_03.png") no_repeat';
                //2.2显示二维码
                e_app.style.display = "block";
            }

            e_coder.onmouseover = function (ev3) {
                this.style.background = 'url("img/img_04.png") no_repeat';
                e_app.style.display = "none";
            }
        }
    </script>
</body>
</html>

  • 用于显示侧边栏的图片，鼠标如果放到上面就会显示二维码，离开的话就会隐藏二维码，这个和我们之前讲的静态网页的动画是有本质区别的，这个是动态网页，并非是静态动画。

三、源码：

  • D32_1_JS.html

  • D32_2_CommonMouse.html

  • D32_3_erweimaXianshi.html

  • 地址:https://github.com/ruigege66/JavaScript/blob/master/D32_1_JS.html

  • https://github.com/ruigege66/JavaScript/blob/master/D32_2_CommonMouse.html

  • https://github.com/ruigege66/JavaScript/blob/master/D32_3_erweimaXianshi.html

  • 博客园：https://www.cnblogs.com/ruigege0000/

  • CSDN：https://blog.csdn.net/weixin_44630050?t=1

赞 (0)

相关推荐