Javascript鼠标提示框 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>JS鼠标提示框</title>
 6 <style type="text/css">
 7     #mousePoint{color: #e6b733;border: 1px solid #e6b733;background: #fff6dd;border-radius: 4px;padding: 5px;width: 200px;height: 40px;font-size: 12px;line-height: 20px;margin-top: 3px;display: none;text-align: center;}
 8     /*提示框样式 end*/
 9     .content{width: 124px;}
10 </style>
11 <script type="text/javascript">
12     function show(){  //定义函数show()
13         document.getElementById('mousePoint').style.display='block';  //获取ID为mousePoint的元素的“display”样式，并使样式的属性为“block”
14     }                                                                  //不使用document.getElementById会引起Firefox的兼容问题(Chrome/IE可以正常实现)
15     function hide(){  //定义函数hide()
16         document.getElementById('mousePoint').style.display='none';   //获取ID为mousePoint的元素的“display”样式，并使样式的属性为“none”
17     }
18 </script>
19 <!-- JS鼠标提示框 end -->
20 </head>
21 <body>
22 <div class="content" onmouseover="show()" onmouseout="hide()">
23 <!-- 为整个div添加鼠标移入移出事件 -->
24 <input type="checkbox" />&nbsp;两周内免登录
25 </div>
26 <div id="mousePoint">
27     为了您的信息安全，请不要再网吧、公司等公共场所使用此功能...
28 </div>
29 </body>
30 </html>

知识点：
1、实现原理：通过JS改变display样式，控制内容的显示与隐藏。
2、事件：onmouseover与onmouseout——鼠标移入与移出
3、简单的自定义函数语法：
function functionname()   //函数名
{
这里是要执行的代码...
}
4、js兼容问题：直接使用ID名会使firefox有兼容问题，所以要使用：document.getElementById()
5、延伸：定义变量，以简化代码
<script type="text/javascript">
     function show(){  //定义函数show()
     var point=document.getElementById('mousePoint');  //定义变量point
     point.style.display='block';  //获取ID为mousePoint的元素的“display”样式，并使样式的属性为“block”
     }
</script>
posted @ 2013-12-26 13:37  cubepuss  阅读(191)  评论(0)    收藏  举报