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

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

　　<!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. centos网卡eth1变成eth0修改方法

    centos网卡eth1变成eth0修改方法 2013年03月29日 ⁄ Linux基础 ⁄ 共 406字 ⁄ 暂无评论 ⁄ 被围观 8,266 views+ 虚拟化中,从模板克隆出来的虚拟机网卡都会 ...

  2. ping不通 www.baidu.com 163.com

    可以试试这个命令:netsh winsock reset ping不通,但是可以上网,原因有以下几个: 1.远程主机禁止ping 2.firewall禁止ping,icmp 3.dns解析有问题 fr ...

  3. Content is not allowed in prolog.解决方法

    将xml配置文件利用记事本另存为Anis编码的文件可以解决.

  4. [solr] - suggestion

    前文使用了SpellCheck做了个自动完成模拟(Solr SpellCheck),使用第一种SpellCheck方式做auto-complete,是基于动态代码方式建立内容,下面方式可通过读文件方式 ...

  5. ssl_error_rx_record_too_long

    Linux下安装SSL 当使用https访问时出现: SSL 接收到一个超出最大准许长度的记录. (错误码: ssl_error_rx_record_too_long) 网上说修改虚拟机 vi /et ...

  6. javascript内建对象

    内建对象等价于内建构造器内建对象大致分为三类:数据封装类对象--Object.Array.Boolean.Number和String工具类对象--Math.Date.RegExp等用于提供遍历的对象错 ...

  7. DELPHI高性能大容量SOCKET并发（九）：稳定性问题解决

    http://blog.csdn.net/sqldebug_fan/article/details/9043699

  8. [CF #288-C] Anya and Ghosts (贪心)

    题目链接:http://codeforces.com/contest/508/problem/C 题目大意:给你三个数,m,t,r,代表晚上有m个幽灵,我有无限支蜡烛,每支蜡烛能够亮t秒,房间需要r支 ...

  9. 重置SQL Server连接池

    EXEC sp_configure 'show advanced options', 1 GO -- To update the currently configured value for adva ...

  10. noip2008解题报告

    T1.笨小猴 给出一个单词求出现次数最多和最少之差是不是质数. 很水的.统计一下反正就26个字母. T2.火柴棒等式 给出火柴棒数,求形如 a+b=c能拼成的等式个数. 先减去4根(+,=),然后枚举 ...