首页 > 代码库 > div模拟的下拉框特效
div模拟的下拉框特效
从网上找来的,感觉不错就拿来分享下
<style type="text/css"> body, ul, li { margin: 0; padding: 0; font-size: 13px; } ul, li { list-style: none; } #divselect { width: 186px; margin: 80px auto; position: relative; z-index: 10000; } #divselect cite { width: 150px; height: 24px; line-height: 24px; display: block; color: #807a62; cursor: pointer; font-style: normal; padding-left: 4px; padding-right: 30px; border: 3px solid #333333; background: url(xjt.png) no-repeat right center; } #divselect ul { width: 184px; border: 1px solid #333333; background-color: #ffffff; position: absolute; z-index: 20000; margin-top: -1px; display: none; } #divselect ul li { height: 24px; line-height: 24px; } #divselect ul li a { display: block; height: 24px; color: #333333; text-decoration: none; padding-left: 10px; padding-right: 10px; } #divselect ul li a:hover { background-color: #CCC; } p { margin: 10px auto; width: 920px; } #n { margin: 10px auto; width: 920px; border: 1px solid #CCC; font-size: 12px; line-height: 30px; } #n a { padding: 0 4px; color: #333; }</style>
<form id="form1"action="" method="post"><div id="divselect" class="divselect"> <cite>请选择特效分类</cite> <ul> <li><a href="javascript:;" selectid="1">导航菜单</a></li> <li><a href="javascript:;" selectid="2">下拉select效果</a></li> <li><a href="javascript:;" selectid="3">select模拟</a></li> <li><a href="javascript:;" selectid="4">DIVCSS5特效</a></li> <li><a href="javascript:;" selectid="5">jquery 下拉特效</a></li> </ul> </div> <br /> <div id="divselect" class="divselect1"> <cite>请选择特效分类</cite> <ul> <li><a href="javascript:;" selectid="6">导航</a></li> <li><a href="javascript:;" selectid="7">下拉</a></li> <li><a href="javascript:;" selectid="8">模拟</a></li> <li><a href="javascript:;" selectid="9">特效</a></li> <li><a href="javascript:;" selectid="10">下拉特效</a></li> </ul> </div> <input name="" value="" id="inputselect"/> //获取的数据</form><input type="button" value="get" onclick="get()" />
$(function(){ $.divselect(".divselect", "#inputselect"); $.divselect(".divselect1", "#inputselect");});function get() { var dd = document.getElementById("inputselect"); alert(dd.value); }
下载示例代码 http://www.51xuediannao.com/js/jquery/divselect.html
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。