dom例子六（鼠标飞图片-显示层-提示）

来源：互联网发布：seo技术web678.cn 编辑：程序博客网时间：2024/04/30 14:09

案例十六：

跟着鼠标飞的图片

<html><head><title></title><script type="text/javascript">document.onmousemove=function(){var div1=document.getElementById("div1");div1.style.top=window.event.clientY;div1.style.left=window.event.clientX;}</script></head><body><div id="div1" style="position:absolute;top:20px;left:20px;"><img src="#" style="width:30px;height:30px;"><br/>happy</div></body></html>

案例十七：

点击登录，弹出一个显示用户名，密码的层

<html><head><title></title><script type="text/javascript">function showLogin(){var loginDiv=document.getElementById("div1");loginDiv.style.display='';}function hideLogin(){var div1=document.getElementById("div1");div1.style.display='none';}function cursorDiv(){var div2=document.getElementById("div2");div2.style.cursor="pointer";}</script></head><body><a href="javascript:showLogin()">登录</a><div id="div1" style="display:none;position:absolute;top:200px;left:200px;border:1px solid red;width:200px;height:100px;text-align:center;"><div id="div2" onmouseover="cursorDiv()" onclick="hideLogin()"style="float:right;border:1px solid gray;">X</div>用户名：<input type="text" id="username"/><br/><hr/> 密码：<input type="text" id="passw"/><br/></div></body></html>

案例十八：

鼠标放到一个超链接的时候，显示一个黄色背景
带图片的悬浮提示。鼠标离开时消失

<html><head><title></title><script type="text/javascript"></script></head><body><a href="http://www.baidu.com" onmouseout="document.getElementById('div1').style.display='none'"onmouseover="document.getElementById('div1').style.display=''">百度</a><div id="div1" style="display:none;border:1px red solid;">百度知天下，有百度，走遍天下，不发愁</div></body></html>