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

来源：互联网发布：sql约束表达式大全编辑：程序博客网时间：2024/05/21 16:21

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

JS代码如下：

// Create the HTML for the messagevar 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 elementelNote.setAttribute('id', 'note');                // Add an id of noteelNote.innerHTML = msg;                           // Add the messagedocument.body.appendChild(elNote);                // Add it to the pagefunction dismissNote() {                          // Declare function  document.body.removeChild(elNote);              // Remove the note}var elClose = document.getElementById('close');   // Get the close buttonelClose.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）

显示效果：

0 0