[原创]HTML 用div模拟select下拉框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<SCRIPT type="text/javascript" src="./jquery.js"></SCRIPT>
<STYLE>
* {
PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
}
BODY {
FONT-SIZE: 12px; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px; PADDING-RIGHT: 0px
} .theSelected B {
OVERFLOW: hidden; BACKGROUND-IMAGE: url(http://static.nipic.com/img/searchNav_on_span.png); BACKGROUND-REPEAT: no-repeat
} .theSelected {
CURSOR: pointer; BORDER-TOP: #9ba8b0 1px solid; HEIGHT: 20px; BORDER-RIGHT: #9ba8b0 1px solid; BORDER-BOTTOM: #9ba8b0 1px solid; FLOAT: left; BORDER-LEFT: #9ba8b0 1px solid; LINE-HEIGHT: 20px; WIDTH: 79px
}
.theSelected SPAN {
HEIGHT: 20px; FLOAT: left; COLOR: #000; PADDING-LEFT: 9px; WIDTH: 58px
}
.theSelected B {
HEIGHT: 5px; BACKGROUND-POSITION: -120px -100px; FLOAT: left; MARGIN-TOP: 8px; WIDTH: 7px
}
.theSelected .toClose {
BACKGROUND-POSITION: -120px -106px
} .sortBtnDesc {
OVERFLOW: hidden; BACKGROUND-IMAGE: url(http://static.nipic.com/img/searchNav_on_span.png); BACKGROUND-REPEAT: no-repeat
} .sortBtnDesc {
CURSOR: pointer; BORDER-TOP: #9ba8b0 1px solid; HEIGHT: 20px; BORDER-RIGHT: #9ba8b0 1px solid; BORDER-BOTTOM: #9ba8b0 1px solid; BACKGROUND-POSITION: -187px -99px; FLOAT: left; BORDER-LEFT: #9ba8b0 1px; WIDTH: 22px
} .falseSelect {
HEIGHT: 22px; FONT-FAMILY: simsun; BACKGROUND: url(http://static.nipic.com/img/falseSelect.png) repeat-x 0px 0px; POSITION: relative; FLOAT: left; MARGIN: 5px 9px 0px 0px; Z-INDEX: 51; WIDTH: 104px
} .falseOption {
BORDER-TOP: #a5b1b8 1px; HEIGHT: 144px; BORDER-RIGHT: #a5b1b8 1px solid; BORDER-BOTTOM: #a5b1b8 1px solid; POSITION: absolute; LEFT: 0px; BORDER-LEFT: #a5b1b8 1px solid; Z-INDEX: 51; DISPLAY: none; TOP: 22px; WIDTH: 79px; BACKGROUND-COLOR: #fff
} .falseOption A {
HEIGHT: 24px; COLOR: #333; PADDING-LEFT: 9px; TEXT-DECORATION: none; DISPLAY: block; LINE-HEIGHT: 24px
}
.falseOption A:hover {
COLOR: #fff; BACKGROUND-COLOR: #1f3d99
}
</STYLE>
</HEAD>
<BODY>
<div style="padding-left:100px">
<DIV id=picRatio class=falseSelect>
<DIV class=theSelected><SPAN>分辨率</SPAN><B class=ico></B></DIV><SPAN
title=分辨率由高到低 class=sortBtnDesc></SPAN>
<DIV class=falseOption>
<A id=300r href="">>=300</A>
<A id=180r href="">>=180</A>
<A id=96r href="">>=96</A>
<A id=72r href="">>=72</A>
<A id=72_300r href="">72-300</A>
<A id=nor href="">不限</A>
</DIV>
</DIV>
</div> <script>
function theFalseSelect(){ $(".theSelected").hover(function(){
$(this).siblings(".falseOption").show();
},
function(){
$(this).siblings(".falseOption").hide();
}); $(".falseOption").hover(function(){
$(this).show();
},function(){
$(this).hide();
}); $(".falseOption a").bind("click",function(){
$(this).closest(".falseOption").siblings(".theSelected").find("span").html($(this).html());
$(this).closest(".falseOption").hide();})
}
theFalseSelect();
</script> </BODY></HTML>
[原创]HTML 用div模拟select下拉框的更多相关文章
- 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 ...
- div模拟的下拉框特效
随笔- 4 文章- 0 评论- 0 ? <style type="text/css"> body, ul, li { margin: 0; padding: 0; fo ...
- div模拟的下拉框特效jquery
从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...
- jq插件又来了,模拟select下拉框,支持上下方向键哦
好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...
- ul -- li 模拟select下拉框
在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...
- 轻松使用div模拟select下拉菜单
没有办法,平时不是万不得已我是不喜欢去模拟各类控件的,一个是麻烦,二个是对性能也有些影响,还是原生的来的实在.老板昨天发话,必须模拟赶紧的,老外最喜欢简洁干净的风格,说的貌似都很在理的样子,业务部也是 ...
- div+css模拟select下拉框
<!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...
- 模拟select下拉框、复选框效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
随机推荐
- spark streaming的有状态例子
import org.apache.spark._ import org.apache.spark.streaming._ /** * Created by code-pc on 16/3/14. * ...
- 这些git命令判断提交到哪个分支哪个项目上
git branch -r fuweikun@pengfei:~/e1_cp/AMSS$ git branch* 8939-E1-2104026-dev git config -l fuweikun@ ...
- JS面试Q&A(续):Javascript数组排序, 默认是字符串Unicode排序, 不适合数字
Q:下面代码段的执行后data里面的数据是什么?为什么? var data= [40,1,5,200] data.sort(); A: data的内容是[1, 200, 40, 5] 因为,Javas ...
- 用jQuery实现简单的简单的轮播图
图片来源 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- WPF c# 定时器
//定时查询-定时器 DispatcherTimer dispatcherTimer = new DispatcherTimer(); dispatcherTimer.Tick += (s, e) = ...
- java多线程的认识
[线程定义] 定义:线程(英语:thread)是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程 ...
- python基础易错总结
1.python安装配置环境变量 [右键计算机]------->[属性]------->[高级系统设置]------->[高级]------->[环境变量]--------&g ...
- C# Microsoft.Office.Interop.Excel.ApplicationClass 加载类型库/DLL 时出错
问题 无法将类型为“Microsoft.Office.Interop.Excel.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Office.Intero ...
- Maven项目的生命周期
Maven中存在三套生命周期,每一套生命周期相互独立,互不影响.在一套生命周期内,执行后面的命令前面的命令会自动执行. CleanLifeCycle:清理生命周期 mvn clean DefaultL ...
- 开源 人脸识别 openface 实用介绍 实例演示 训练自己的模型
1.OpenFace 是 卡耐基梅陇(CMU)大学的一个图像+机器学习项目,整体程序包含:人脸发现,特征提取,特征神经网络训练,人脸识别这四部分. github https://github.co ...