鼠标放上时显示隐藏的div或者其他代码的“jquery”的三种写法和“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>
#box{width: 300px;
    height: 300px;
    background: rgb(196, 76, 76);
    border: 1px solid #000000;
     /* display: none; */}
    </style>
    <script src="jquery-3.5.1.js"></script>
</head>

<body>
    <!--onmouseover是鼠标移上时触发函数 -->
    <!-- onmouseout是鼠标移走时触发函数 -->
    <button id="btn" onmouseover="down()" onmouseout="on()" >显示/隐藏盒子</button>
<div id="box">我是盒子</div>
    

    <script>
        //JavaScript写法
        //display属性可以改变盒子的属性当display为none时隐藏，为block时出现
let oBtn=document.getElementById("btn");
let oBox=document.getElementById("box")

function down (){
    oBox.style.display="block";
}
function on(){
    oBox.style.display="none";
}
    </script>
    <script>
        // jquery 第一种写法
        // 当鼠标指针离开元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
        // 当鼠标指针穿过元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
        // 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
        $(function () {
           $("#btn").mouseenter(function () {
               $("#box").show(1000);
               //show(speed,linear,callback);   示例：$("div").hide(1000,"linear",function(){alert("Hide() 方法已完成!")});
            //可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
            // 第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。
            //linear:每一步的距离和前一步都是相同的，也就是等速
            //swing:速度会加快然后最后一点距离再减速
            //可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
           });
           $("#btn").mouseleave(function () {
               $("#box").hide(1000);
           })
        })

 // jquery 第二种写法
//hover()方法用于模拟光标悬停事件。
// 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 
//  通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
        $(function () {
            $("#btn").hover(
                function () {
                    $("#box").show(1000,"swing");
                },
                function () {
                    $("#box").hide(1000,"swing");
                    
                }
            )
            
        })
        // 第三种写法
        // 您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：
        //$(selector).toggle(speed,callback);
        //可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
        //可选的 callback 参数是隐藏或显示完成后所执行的函数名称。  
        $(function () {
        $("#btn").hover(function () {
            $("#box").toggle();
        })
        
    })
    </script>
</body>
</html>

posted @ 2020-07-15 20:29  zayyo  阅读(231)  评论(0)    收藏  举报