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

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

　　<!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. Apache Shiro系列教程之二：十分钟上手Shiro

    在本教程中,我们会写一个简单的.仅仅输出一些内容命令行程序,从而对Shiro有一个大体的感觉. 一.准备工作 本教程需要Java1.5+,并且我们用Maven生成项目,当然Maven不是必须的,你也可 ...

  2. java 泛型接口示例

    /* * 泛型接口 */ interface Tool<t> { public void show(T t); //泛型方法 public <e> void print(E e ...

  3. [转]行者，一念一生，成功的背后！（给所有IT人）

    成功的背后,有着许多不为人知的故事,而正是这些夹杂着泪水和汗水的过去,才成就了一个个走向成功的普通人. 凌晨两点半,早 已习惯了一个人坐在电脑前的我,望着屏幕,任思绪在暗夜的包容下静静流淌,时光仿佛又 ...

  4. IE6与 javascript:void(0)

    遇到过几次这种问题,现在总结一下. 代码: <a onclick="window.location.href='http://www.google.com'" href=&q ...

  5. MSSQL 判断临时表是否存在

    方法一: if exists (select * from tempdb.dbo.sysobjects where id = object_id(N'tempdb..#tempcitys') and ...

  6. 用友的凭证update

    select pk_glorgbook from bd_glorgbook where glorgbookcode='0100-0001';--0001N510000000006K4X ' and p ...

  7. UVA 753 UNIX 插头(EK网络流+Floyd传递闭包)

    UNIX 插头 紫书P374 [题目链接]UNIX 插头 [题目类型]EK网络流+Floyd传递闭包 &题解: 看了书之后有那么一点懂了,但当看了刘汝佳代码后就完全明白了,感觉他代码写的好牛逼 ...

  8. 怎样避免 i f 判断过多，全复杂度较高，代码不美观的问题？

    没有什么好的设计方式可以实现,减少一个方法中出现几十个 if 匹配的判断? 现在要做一个判断客户是否通过验证的接口. 一共有30多个验证规则的判断, 每个规则对应一个规则号: 这个接口只需要返回是否验 ...

  9. apache 配置https

    1.生成密钥# openssl genrsa 1024 > server.key这是用128位rsa算法生成密钥,并保存到server.key文件 2.生成证书请求文件# openssl req ...

  10. unity3d 镜头随鼠标移动

    using UnityEngine; using System.Collections; public class sheji : MonoBehaviour { public int speed = ...