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

最新推荐文章于 2024-09-11 15:33:18 发布

叶子的翅膀

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量1.5k

点赞数

文章标签： div function javascript 百度 input float

本文链接：https://blog.csdn.net/xiaoxiqinqinbaobao/article/details/7650088

版权

技术归档专栏收录该内容

153 篇文章 0 订阅

订阅专栏

案例十六：

跟着鼠标飞的图片

<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>