javascript如何做鼠标放上去就出现一个下拉列表.

JavaScript018

javascript如何做鼠标放上去就出现一个下拉列表.,第1张

其实JS里面实现的各种鼠标点击，移动就显示什么什么东西的玩意全都是用两个办法实现的。一种是设置DIV层的高度，首先设置为0，鼠标移到特定的地方后，设置DIV层高度为正常高度。另一种是设置DIV层的可见属性为隐藏，.div1{displya:none}，这样就整个隐藏了（是绝对隐藏，网页上是不存在这个元素的。连地方都不用占。）然后鼠标移动到特地地方后设置DIV层可见，.div1{display:block}

我只是告诉你方法，不管干什么，方法最重要，给你贴代码，是不负责任，因为那东西到哪都能找到。随便一个网页特效的网站上一大堆。知道方法后，自己实践一下，你会发现你学会了很多东西

<html>

<head>

<title></title>

<style>

#d1{

position : absolute

left : 300px

top : 10px

width : 50px

height : 50px

background-color : red

z-index : 2

display : none }

</style>

<!-- 修改left : 300px top : 10px 的值可以控制提示框的位置 -->

</head>

<body>

<p>asdfasdfasdfsdfdfg<a href="#" onmouseover="show()" onmouseout="hidden()">鼠标放上来看看</a>sdfhdfh</p>

<div id="d1"></div>

</body>

<script language="javascript" type="text/javascript">

var d1 = document.getElementById('d1')

function show()

{

d1.style.display = 'block'

}

function hidden()

{

d1.style.display = 'none'

}

</script>

</html>

<head>

<script>

function seeBig(thispic) {

document.all.viewPic.innerHTML="<img src=\""+thispic+"\" >"

}

</script>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

.body {

margin-left: 0px

margin-top: 0px

margin-right: 0px

margin-bottom: 0px

}

.img {border-color:#C0BEBF}

.spic{cursor:pointer}

-->

</style>

</head>

<body>

<table width="763" border="0" align="center" cellpadding="0" cellspacing="0" background="img/bbj.jpg">

<tr>

<td height="41" align="left" valign="top"><table width="763" border="0" align="center" cellpadding="3" cellspacing="3" >

<tr>

<td width="539" rowspan="3" align="left" valign="top"><table width="500" border="0" cellspacing="0" cellpadding="0">

<tr>

<td height="47" align="left" valign="top"></td>

<td colspan="6" align="center" id="viewPic" bgcolor="#FFFFFF"> </td>

</tr>

</table></td>

<td width="10" align="left" valign="top" ><span class="spic" ><img src="http://www.2548.com.cn/d/20050216035/1078708481.jpg" onClick="seeBig(this.src)" width="100" height="60" border="1"></span></td>

<td width="70" align="left" valign="top"><span class="spic"><img src="http://www.2548.com.cn/d/20050216035/1078707649.jpg" width="100" height="60" border="1" onClick="seeBig(this.src)"></span></td>

</tr>

<tr>

<td align="left" valign="top"><span class="spic"><img src="img/3.jpg" width="100" height="60" border="1" onClick="seeBig(this.src)"></span></td>

<td align="left" valign="top"><span class="spic"><img src="img/4.jpg" width="100" height="60" border="1" onClick="seeBig(this.src)"></span></td>

</tr>

<tr>

<td align="left" valign="top"><span class="spic"><img src="img/5.jpg" width="100" height="60" border="1" onClick="seeBig(this.src)"></span></td>

<td align="left" valign="top"><span class="spic"><img src="img/6.jpg" width="100" height="60" border="1" onClick="seeBig(this.src)"></span></td>

</tr>

</table></td>

</tr>

</table>

</body>