《JavaScript学习笔记一》鼠标提示框

来源：互联网发布：ubuntu 安装文件格式编辑：程序博客网时间：2024/06/02 03:05

《JavaScript学习笔记》：鼠标提示框

在我们的许多登陆界面都会有鼠标提示框的应用，例如下面的截图就是一个比较好的例子：

下面我们就实现这个比较简单的例子

这个的实现原理比较简单，如下：

1、当鼠标移动到checkbox上面时，提示框出现。

2、当鼠标移出checkbox时，提示框就消失。

鼠标移入和移出对应的事件为：onmouseover/onmouseout

出现和消失在div上面的表现形式为：divName.style.display=’block’ ;divName.style.display=’none’ (divName为标签div的id)

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <title>无标题文档</title>    </head>    <style>    #div1 {width:200px;height:100px;background:red;border:1px;display:none;}    </style>    <body>    <input type="checkbox" value="鼠标提示框"  onmouseover="div1.style.display='block'"; onmouseout="div1.style.display='none'"/>    <div id="div1">        为了你的安全，请不要在公共电脑上保存密码    </div>    </body>    </html>

上面直接使用标签div的id名称div1来作为对象进行一些操作，在有的浏览器中，这种操作是不能达到我们的要求的，因此，我们更多的是使用：

document.getElementById('div1')//根据id属性来获取对象，进而进行一些操作

因此，上面的代码就更改为：

    <style>    #div1 {width:200px;height:100px;background:red;border:1px;display:none}    </style>    <body>    <input type="checkbox"  onmouseover="document.getElementById('div1').style.display='block';" onmouseout=" document.getElementById('div1').style.display='none';"/>    <div id="div1">        为了您的安全，请不要在公共电脑上保存您的密码！！！    </div>    </body>

像上面的代码我们也可以用函数来进行实现。

如下引入了两个函数，分别为appear()、disappear()：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <title>无标题文档</title>    </head>    <style>    #div1 {width:200px;height:100px;background:red;border:1px;display:none;}    </style>    <script>    function  appear()    {        var oDiv=document.getElementById('div1');        oDiv.style.display="block";    }    function  disappear()    {        var oDiv=document.getElementById('div1');        oDiv.style.display="none";    }    </script>    <body>    <input type="checkbox" onmouseover="appear()" onmouseout="disappear()" />    <div id="div1">        为了您的安全，请不要再公共场所保存您的密码！！！    </div>    </body>    </html>

在上面的代码中，我们使用了两个函数，但是在两个函数的代码中，基本一样，因此，我们也就可以选择使用带一个参数的函数来实现，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <title>无标题文档</title>    </head>    <style>    #div1 {width:200px;height:100px;background:red;border:1px solid:999;display:none;}    </style>    <script>    function change(content)    {        var oDiv=document.getElementById('div1');        oDiv.style.display=content;    }    </script>    <body>    <input type="checkbox"  onmouseover="change('block');" onmouseout="change('none')"  />    <div id="div1">        为了您的安全，请您在公共场合不要保存密码！！！    </div>    </body>    </html>

小结

好气人也，用DreamWeaver软件进行html文件的编写，当我们的标签的某个属性或者是属性值拼写错误的时候居然没有提示也，有时候自己因为这个写错了而没有达到我们的功能效果，检查却发现是拼写错误，真的是好蛋疼也

1 0