jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）

德顺

发布于 2019-11-13 17:05:31

3.8K0

发布于 2019-11-13 17:05:31

文章被收录于专栏：前端资源

网站底部经常会有微信图标，鼠标点击或者划入显示二维码的效果。

怎么来实现它呢？我们首先写一个简单的页面，实现鼠标移入移除或者点击显示隐藏效果。

前端页面：不要忘了引入 JQuery.js

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery事件-div的显示隐藏及鼠标的移入移出</title>
    <script src="jquery.js"></script>
    <style>
        .header{
            width:300px;
            height:40px;
            line-height: 40px;
            text-align: center;
            box-sizing: border-box;
            color: #FFF;
            background: #00b0f0;
            font-size:20px;
            margin-bottom: 0px;
            border-radius: 5px 5px 0 0;
        }
        .content{
            width:300px;
            box-sizing: border-box;
            padding: 5px;
            border:1px solid #999;
            background:#EEE;
            text-indent: 2em;
            display: none;
            margin-top:0px;
        }
    </style>
</head>
<body>
    <h5 class="header">什么是jQuery？</h5>
    <div class="content">
        Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，
        它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），
        jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
        jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，
        并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，
        而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
        jQuery能够使用户的html页面保持代码和html内容分离，也就是说，
        不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
    </div>
</body>
</html>

JS代码：

鼠标点击效果1：

<script>
$(function (){
    //显示隐藏
    $(".header").click(function (){
        var flag = $(".content").is(":hidden");
        if(flag){
            $(".content").show();
        }else{
            $(".content").hide();
        }
    });
</script>

鼠标点击效果2：

<script>
$(function (){
    //使用bind的绑定事件,跟上上面的效果是一样的
    $(".header").bind("click", function (){
        var flag = $(".content").is(":hidden");
        if(flag){
            $(".content").show();
        }else{
            $(".content").hide();
        }
    });
</script>

效果如下：

.jq_header{ width:300px; height:40px; line-height: 40px; text-align: center; box-sizing: border-box; color: #FFF; background: #00b0f0; font-size:20px; margin-bottom: 0px; border-radius: 5px 5px 0 0; } .jq_content{ width:300px; box-sizing: border-box; padding: 5px; border:1px solid #999; background:#EEE; text-indent: 2em; display: none; margin-top:0px; }

什么是jQuery？

Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0及后续版本将不再支持IE6/7/8浏览器。 jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

$(function (){ $(".jq_header").bind("click", function (){ var flag = $(".jq_content").is(":hidden"); if(flag){ $(".jq_content").show(); }else{ $(".jq_content").hide(); } }); });

鼠标移入移除效果：

<script>
$(function (){
    //鼠标的移入移出
    $(".header").mouseover(function (){
        $(".content").show();
    }).mouseout(function (){
        $(".content").hide();
    });
</script>

鼠标移入移除效果（合成事件）：

<script>
$(function (){
    //合成事件 hover()
    $(".header").hover(function (){
        $(".content").show();
    },function (){
        $(".content").hide();
    });
</script>

效果如下：

.jq_header1{ width:300px; height:40px; line-height: 40px; text-align: center; box-sizing: border-box; color: #FFF; background: #00b0f0; font-size:20px; margin-bottom: 0px; border-radius: 5px 5px 0 0; } .jq_content1{ width:300px; box-sizing: border-box; padding: 5px; border:1px solid #999; background:#EEE; text-indent: 2em; display: none; margin-top:0px; }

什么是jQuery？

$(function (){ $(".jq_header1").mouseover(function (){ $(".jq_content1").show(); }).mouseout(function (){ $(".jq_content1").hide(); }); });

微信鼠标移入显示效果：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery事件-微信的显示隐藏及鼠标的移入移出</title>
    <script src="jquery.js"></script>
</head>
<body>
<div style="width: 230px;height: 200px;background-color: #333;position: relative;">
    <div class="WeChat_code" style="position: absolute;top: 20px;left: 20px;display: none;">
        <img src="images/WeChat_code.jpg" width="100" alt="">
        <span style="display:block; border-width:5px 5px 0;border-style:solid;border-color:#fff transparent transparent;position: absolute;margin-top: -5px;margin-left: 20px;"></span>
    </div>
    <h5 class="jq_WeChat" style="margin:0;padding:0;position: absolute;bottom: 15px;left: 20px">
    <img src="images/WeChat.png" width="50" alt="">
    <span style="display:inline-block;margin-left:10px;color:#EEE;height:50px;font-size: 20px;line-height: 50px;vertical-align: top;">1209278955</span>
    </h5>
</div>
</body>
<script type="text/javascript">
$(function (){
    //合成事件 hover()
    $(".jq_WeChat").hover(function (){
        $(".WeChat_code").show();
    },function (){
        $(".WeChat_code").hide();
    });
});
</script>
</html>

效果如下：