div模拟的下拉框特效
随笔- 4 文章- 0 评论- 0 ?
<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模拟的下拉框特效的更多相关文章
- div模拟的下拉框特效jquery
从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...
- [原创]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 ...
- ul -- li 模拟select下拉框
在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...
- JS Div滚动,下拉框添加属性,年月日下拉条
创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...
- div+css模拟select下拉框
<!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...
- 轻松使用div模拟select下拉菜单
没有办法,平时不是万不得已我是不喜欢去模拟各类控件的,一个是麻烦,二个是对性能也有些影响,还是原生的来的实在.老板昨天发话,必须模拟赶紧的,老外最喜欢简洁干净的风格,说的貌似都很在理的样子,业务部也是 ...
随机推荐
- iOS Architecture
目前ios的指令集有以下几种: armv6 iPhone iPhone2 iPhone3G 第一代和第二代iPod Touch armv7 iPhone4 iPhone4S armv7s iPhone ...
- Python字符串的encode与decode研究心得 乱码问题解决方法
以下摘自:http://www.jb51.net/article/17560.htm 为什么Python使用过程中会出现各式各样的乱码问题,明明是中文字符却显示成“\xe4\xb8\xad\xe6\x ...
- Android 使用意图传递数据
使用意图传递数据之通用方式. 测试应用:当前页面点击button传递数据到一个新的页面显示在textview中. 首先在,mainActivity.xml文件中加入一个button按钮 <But ...
- Android:在eclipse中快速多行注释的方法
http://blog.csdn.net/jianghuiquan/article/details/8534337 也许你能够记住以下部分快捷键,对你开发和设计过程中大裨益! 1.//注释添加和取消 ...
- jquery Deferred demo
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- USACO Section 2.1: Hamming Codes
挺简单的一道题 /* ID: yingzho1 LANG: C++ TASK: hamming */ #include <iostream> #include <fstream> ...
- SPOJ 227 Ordering the Soldiers 线段树 / 树状数组
题意:设原数组为a[i],pos[i]代表第 i 个位置之前有多少个数比a[i]大,求原数组a[i]. 这个题意是看了别人的题解才明白,我自己没读出来…… 方法:假设我们从左往右放,因为后面的数还有可 ...
- 《Linux/Unix系统编程手册》读书笔记8 (文件I/O缓冲)
<Linux/Unix系统编程手册>读书笔记 目录 第13章 这章主要将了关于文件I/O的缓冲. 系统I/O调用(即内核)和C语言标准库I/O函数(即stdio函数)在对磁盘进行操作的时候 ...
- 使用git建立本地仓储管理代码【转】
转自:http://blog.csdn.net/airk000/article/details/7738231 Git是Linus大神的代码管理工具,简直说是开发者的超级福音,而作为屌丝的个人开发者, ...
- binary-tree-maximum-path-sum(mock)
注意: // 注意,如果一个类放在另一个类里面,初始化时候会报错 Solution is not a enclosing class// 这是因为如果TreeNode不是static,那么要求先有外部 ...