案例十六:
跟着鼠标飞的图片
<html>
<head>
<title></title>
<script type="text/javascript">
document.οnmοusemοve=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" οnmοuseοver="cursorDiv()" οnclick="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" οnmοuseοut="document.getElementById('div1').style.display='none'"
οnmοuseοver="document.getElementById('div1').style.display=''">百度</a>
<div id="div1" style="display:none;border:1px red solid;">百度知天下,有百度,走遍天下,不发愁</div>
</body>
</html>