JS+DIV+CSS实现仿表单下拉列表效果
更新时间：2015年08月18日 09:46:12 作者：企鹅
这篇文章主要介绍了JS+DIV+CSS实现仿表单下拉列表效果,涉及javascript鼠标事件及页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下：
JS+DIV+CSS实现仿表单下拉列表效果，是完全用CSS技术再配合JS实现的效果，用来代替传统的Select下拉框，虽然目前来说，此代码还有些粗糙，但对于美化列表的样式来说，可能以后会更方便，要比Select方便的多。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-div-css-fselect-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS+JS仿下拉表单</title>
<script type="text/javascript" >
function $$$$$(_sId){
return document.getElementById(_sId);
}
function hide(_sId)
{$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}
function pick(v) {
document.getElementById('am').value=v;
hide('HMF-1')
}
function bgcolor(id){
document.getElementById(id).style.background="#F7FFFA";
document.getElementById(id).style.color="#000";
}
function nocolor(id){
document.getElementById(id).style.background="";
document.getElementById(id).style.color="#788F72";
}
</script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
.cur{cursor:pointer; display:block;color:#788F72;width:146px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}
.am{border: 0px;color:#788F72;cursor: pointer;background:#fff url('0.gif') no-repeat; width: 150px;height: 19px;margin:10px 0px 0px 10px; padding:3px 0px 0px 2px;}
.bm{border: 1px #999999 solid ;width: 148px; margin-left:10px;}
</style>
</head>
<body>
<form>
<input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" />
<div id="HMF-1" style="display: none " class="bm">
<span id="a1" onclick="pick('ASP')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">ASP</span>
<span id="a2" onclick="pick('PHP')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">PHP</span>
<span id="a3" onclick="pick('JSP')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">JSP</span>
<span id="a4" onclick="pick('ASP.NET')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">ASP.NET</span>
<span id="a5" onclick="pick('JAVA')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">JAVA</span>
<span id="a6" onclick="pick('DELPHI')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">DELPHI</span>
</div>
</form>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
JavaScript基于libgif.js实现控制gif动画帧
这篇文章主要为大家详细介绍了JavaScript如何利用libgif.js插件控制gif动画帧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了基于百度地图实现产品销售的单位位置查看功能设计与实现的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了js兼容火狐显示上传图片预览效果的方法,涉及js调用FileReader实现图片预览功能的技巧,需要的朋友可以参考下2015-05-05
本文主要分享了js实现清除输入框内的空格的代码，代码简单易懂，需要的朋友一起来看下吧2016-12-12
这篇文章主要介绍了javascript系统时间设置操作,涉及javascript时间运算与判断相关操作技巧,需要的朋友可以参考下2019-06-06
js运动框架_包括图片的淡入淡出效果，需要的朋友可以参考一下2013-05-05
flash调用js中的方法,让js传递变量给flash的办法及思路
前几天发表了 将FlashVars写在JS函数中，实现与后台的实时变量更新，但是仅支持 IE，随后与 Luckyer 进行了交流，发现用 SetVariable 可以很方便的实现多浏览器兼容。举例如下。2013-08-08
文字模糊特效...2007-04-04
这篇文章主要介绍了封装axios来管控api的2种方式,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
今天小编就为大家分享一篇layui-select动态选中值的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论