鼠标点击事件就是当鼠标点击元素时，就会出现另一个窗口，类似于百度首页中右上角的“登录”这个按钮，当鼠标点击

登录时，就会出现登录窗口。大体的意思就是这样，直接上代码了，简单易懂。

　　<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录消失</title>
    <style type="text/css">
    #log{
        width: 100px;height: 30px;
        background: green;
        text-align: center;
    }
    #login{
        margin: 0;padding: 0;
        display: inline-block;
        color: black;
        line-height: 30px;

}
    .qq{
        position: absolute;
        left: 0;top: 0;
        width: 100%;height: 100%;
        background: black;
        opacity: 0.15;
        text-align: right;
    }
    .dian{
        text-decoration: none;
        font-size: 50px;
        width: 150px;
        height: 50px;
        background: white;
        display: block;
        margin: 100px auto 0px;
        color: black;
    }
    </style>
</head>
<body>
    <div id="log">
        <a href="#" id="login">登录</a>
    </div>
    <div class="qq">
        <a href="#" class="dian">×</a>
    </div>

<script type="text/javascript">
    var login = document.getElementById('login');
    var qq = document.getElementsByClassName('qq');
    var dian = document.getElementsByClassName('dian');
    qq[0].style.display = 'none';
    login.onclick = function(){
        qq[0].style.display = 'block';
    }
    dian[0].onclick = function(){
        qq[0].style.display = 'none';
    }

</script>

</body>
</html>

一开始没有点击登录，直接刷新的网页如图：

当点击登录时，页面就会变成这样：

当点击图中的X号时，该页面就会消失，结果就是第一张图片。

JS控制鼠标点击事件的更多相关文章

  1. MacOS获取辅助功能权限控制鼠标点击事件

    昨晚玩一个模拟经营的游戏,由于升级太慢我就不停的种树卖树来换取经验值.不过重复点击10几分钟后,实在受不了.网上本来准备找个鼠标自动点击的软件用用.结果没找到趁手的.如是自己写了个. 自己设置需要点击 ...

  2. js获取鼠标点击事件的相对位置

    <html><head><title>位置</title><script language="javascript" type ...

  3. Js 模拟鼠标点击事件

    var obj = document.getElementById('go'); if(document.all){ obj.click(); }else{ var e = document.crea ...

  4. js控制“鼠标点击按钮后，按钮消失“（可以自己添加video标签控制播放）

  5. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  6. js/jquery 禁用点击事件

    前言 工作中经常遇到这种情况:验证邮箱页面的重新发送需要在3分钟后才可以点击触发请求,所以在这之前需要禁用他的点击. 网上查了后有以下几种实现方法 1.css禁用鼠标点击事件 .disabled { ...

  7. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

  8. css禁用鼠标点击事件

    css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...

  9. js中的点击事件（click）的实现方式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. SocketTcpClient

    public class SocketTcpClient { public static string ErrorMsg = string.Empty; private static Socket _ ...

  2. jQuery中的事件机制深入浅出

    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...

  3. HTML 空格的表示符号 nbsp / ensp / emsp 的区别

    HTML 空格的表示符号 nbsp / ensp / emsp 的区别?     半角的不断行的空白格(推荐使用)    半角的空格    全角的空格

  4. js监听rem实现响应式

    原文链接:http://caibaojian.com/web-app-rem.html (function (doc, win) { var docEl = doc.documentElement, ...

  5. knockout 学习实例4 css

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Java web项目引用java项目，类型找不到

    Java web项目引用java项目,类型找不到 错误信息: java.lang.ClassNotFoundException: org.codehaus.jackson.map.ObjectMapp ...

  7. C#操作Word的辅助类（word2003） 修改完善版

    转自:http://blog.csdn.net/jiutao_tang/article/details/6567608 该类在他人编写的几个类基础上扩展完善而来,主要功能有: (1)插入文本 (2)插 ...

  8. Asp.net MVC 视图引擎

    Asp.net MVC视图引擎有两种: 1.ASPX View Engine 这个做过WebForm的人都清楚 设计目标:一个用于呈现Web Form页面的输出的视图引擎. 2.Razor View ...

  9. bootstrap-进度条

    <div class="container"> <div class="row"> <div class="col-lg ...

  10. 每天一个 Linux 命令（4）：mkdir

    linux mkdir 命令用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录. 1．命令格式: mkdir [选项] 目录- 2．命令功能 ...