源码-JavaScript&jQuery交互式前端开发-第6章-事件-鼠标事件-浮层的显示与关闭

最新推荐文章于 2019-02-02 13:53:25 发布

预见未来to50

最新推荐文章于 2019-02-02 13:53:25 发布

阅读量546

点赞数

分类专栏： Front End Tech 文章标签：源码鼠标事件单击 JavaScript CSS

本文链接：https://blog.csdn.net/hpdlzu80100/article/details/52651209

版权

Front End Tech 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

鼠标事件有：单击（click）、双击（dblclick）、鼠标键被按下（mousedown）、鼠标键松开（mouseup）、鼠标指针进入控件（mouseover）、鼠标指针离开控件（mouseout）、鼠标指针在元素上移动（mousemove）。

JS代码如下：

// Create the HTML for the message
var msg = '<div class=\"header\"><a id=\"close\" href="#">close X</a></div>';
msg += '<div><h2>System Maintenance</h2>';
msg += 'Our servers are being updated between 3 and 4 a.m. ';
msg += 'During this time, there may be minor disruptions to service.</div>';

var elNote = document.createElement('div');       // Create a new element
elNote.setAttribute('id', 'note');                // Add an id of note
elNote.innerHTML = msg;                           // Add the message
document.body.appendChild(elNote);                // Add it to the page

function dismissNote() {                          // Declare function
  document.body.removeChild(elNote);              // Remove the note
}

var elClose = document.getElementById('close');   // Get the close button
elClose.addEventListener('click', dismissNote, false);// Click close-clear note

HTML代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript & jQuery - Chapter 6: Events - Click</title>
    <link rel="stylesheet" href="css/c06.css" />
  </head>
  <body>
    <div id="page">
      <h1>List King</h1>
      <h2>New Account</h2>
      <form method="post" action="http://www.example.org/register">

        <label for="username">Create a username: </label>
        <input type="text" id="username" /><div id="feedback"></div>

        <label for="password">Create a password: </label>
        <input type="password" id="password" />

        <input type="submit" value="sign up" />

      </form>
    </div>
    <script src="js/click.js"></script>
  </body>
</html>

CSS代码：（同第6章-事件-Focus和blur事件 ,http://blog.csdn.net/hpdlzu80100/article/details/52651002）

显示效果：