仿谷歌google的搜索框下拉提示列表效果
2015-02-18 22:17:48 访问(1689) 赞(0) 踩(0)
-
<!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=utf-8" />
<title>仿谷歌google的搜索框下拉提示列表效果</title>
<style type="text/css">
body
{
background: #fff;
}
.Menu
{
position: relative;
width: 204px;
height: 127px;
z-index: 1;
background: #FFF;
border: 1px solid #000;
margin-top: -100px;
display: none;
}
.Menu2
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
overflow: hidden;
z-index: 1;
}
.Menu2 ul
{
margin: 0;
padding: 0;
}
.Menu2 ul li
{
width: 100%;
height: 25px;
line-height: 25px;
text-indent: 15px;
border-bottom: 1px dashed #ccc;
color: #666;
cursor: pointer;
change: expression( this.onmouseover=function(){ this.style.background="#F2F5EF"; }, this.onmouseout=function(){ this.style.background=""; } );
}
input
{
width: 200px;
}
.form
{
width: 200px;
height: auto;
}
.form div
{
position: relative;
top: 0;
left: 0;
margin-bottom: 5px;
}
#List1, #List2, #List3
{
left: 0px;
top: 93px;
}
</style>
<script type="text/javascript" language="javascript">
function showAndHide(obj, types) { var Layer = window.document.getElementById(obj); switch (types) { case "show": Layer.style.display = "block"; break; case "hide": Layer.style.display = "none"; break; } } function getValue(obj, str) { var input = window.document.getElementById(obj); input.value = str; } </script>
</head>
<body>
<div class="form">
<div>
Location：<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');"
onblur="showAndHide('List1','hide');" /></div>
<!--列表1-->
<div class="Menu" id="List1">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
<li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
</ul>
</div>
</div>
<div>
：<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');"
onblur="showAndHide('List2','hide');" /></div>
<!--列表2-->
<div class="Menu" id="List2">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt2','男Male');showAndHide('List2','hide');">男Male</li>
<li onmousedown="getValue('txt2','女Female');showAndHide('List2','hide');">女Female</li>
</ul>
</div>
</div>
<div>
education：<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');"
onblur="showAndHide('List3','hide');" /></div>
<!--列表3-->
<div class="Menu" id="List3">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">大专</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
<li onmousedown="getValue('txt3','硕士');showAndHide('List3','hide');">硕士</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
</ul>
</div>
</div>
</div>
</body>
</html>
上一条：
下一条：
版权声明：
如果本站的资源使用了您的作品，请联系我们，我们会及时的注明
本站所有的资源均为免费自由下载，目的是让大家学习和交流
由于收集过程中几经转载，所以很多作品的原作者不详
如果您不愿在本站展示，请联系我们，我们会及时删除
相关评论
发表评论