div模拟的下拉框特效jquery
从网上找来的,感觉不错就拿来分享下
<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
div模拟的下拉框特效jquery的更多相关文章
- div模拟的下拉框特效
随笔- 4 文章- 0 评论- 0 ? <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo ...
- [原创]HTML 用div模拟select下拉框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns=" ...
- jquery实现模拟select下拉框效果
<IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...
- 用div,ul,input模拟select下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jq插件又来了,模拟select下拉框,支持上下方向键哦
好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...
- 一句话美化你的下拉框之jQuery.selectMM插件
之前很喜欢 jquery.Dropkick 这个老外美化框插件,但是:IE情况下如果数据多滚动条出现的时候就滚不了,作者也没修复 于是准备自己写一款(确切的说是修改一款吧!!).这款插件是在16素材网 ...
- ul -- li 模拟select下拉框
在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...
- JS Div滚动,下拉框添加属性,年月日下拉条
创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...
- 下拉框移动 jquery
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html& ...
随机推荐
- hdu1151 Air Raid
http://acm.hdu.edu.cn/showproblem.php?pid=1151 增广路的变种2:DAG图的最小路径覆盖=定点数-最大匹配数 #include<iostream> ...
- Android:Logcat中找不到本应该输出的Log调试信息
1.有没有设置Logcat的filter, 2.如果选中了自定义的filter,Tag是否和程序中想查看的那条输出信息的Tag相同: 3.Level等级是否设置的太高. filter设置 点击loca ...
- Servlet小示例:jsp页面提交信息Servlet接收并打印输出
该示例采用doPost方法提交表单,该示例一共包含两个文件. 一个是用来提交用户信息的表单userForm2.jsp,另一个是用来接收参数的Servlet. userForm2.jsp <%@ ...
- hdu 1176 免费馅饼(nyist 613)
http://acm.hdu.edu.cn/showproblem.php?pid=1176 dp[i][j]:表示第i秒接j位置的馅饼的最大值. 三种状态: dp[i][j]=max(dp[i-1] ...
- TCP protocol
he characteristics of TCP protocol TCP (which means Transmission Control Protocol) is one of the mai ...
- javascript 字符转义汇总
在开发中经常遇到需要字符转义的,我将一一把遇到的转义列举出来 1.今天中午做项目的时候遇到一个字符串链接的问题,需要链接的的是一个函数的参数 时间字符串:"2014-04-08 16:37: ...
- Bug:java.lang.IllegalStateException
使用迭代的时候,出现了java.lang.IllegalStateException 代码: for ( TaskInfo info : userTaskInfos ) { if ( info.isC ...
- sdut 2831 Euclid (几何)
题目:http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2831 题意:给a, b, c, d, ...
- POJ 1113 凸包模板题
上模板. #include <cstdio> #include <cstring> #include <iostream> #include <algorit ...
- 函数fsp_try_extend_data_file
扩展表空间 /***********************************************************************//** Tries to extend t ...