css +javascript 模仿select效果代码

<style type="text/css">

#mainbox{
 width:84px;
 background-image:url(e_pic/select.jpg);
 background-repeat:no-repeat;
 font-size:12px;
 }
#box0{
 width:63px;
 height:28px; 
 float:left;
 padding-top:7px;
 padding-left:7px;
}
#box1{
 width:10px;
 height:28px;
 cursor:pointer; 
 float:left;
 text-align:center;
 padding-top:2px;
}
#items{
 border:1px solid black;
 width:78px;
 display:none;
}
#box3{
 width:83px;
 /*border-bottom:1px solid green;
 border-left:1px solid green;
 border-right:1px solid green; 
*/
 padding-left:4px;
}
.over{
 background-color:#11586E;
 font-weight:bold;
 color:#FFF;
 /*border-top:1px dotted black;
 border-bottom:1px dotted black;*/
 cursor:pointer;
}
</style>
<script type="text/javascript" defer>
var oDiv0=document.getElementById("box0");
var oDiv1=document.getElementById("box1");
var oDiv=document.getElementById("items");
oDiv1.onclick=function(){
oDiv.style.display=oDiv.style.display=="block"?"none":"block";
show();
}
function hide(obj){
var obj=obj;
obj.parentNode.style.display="none";
}
function show(){
for(var i=0;i<oDiv.childNodes.length;i++){
oDiv.childNodes[i].onmouseover=function(){
this.className="over";
}
oDiv.childNodes[i].onmouseout=function(){
this.className="";
}
oDiv.childNodes[i].onclick=function(){
oDiv0.innerHTML=this.innerHTML;
hide(this);
if(oDiv0.innerText.indexOf("vincent")!=-1){
window.open("http://www.111cn.net/vincent","","");
}
}
}
}
</script>
<body>
<div id="mainbox">
<div id="box0"></div>
<div id="box1"></div>
<div id="items" >
 <div id="box3">湖北</div>
 <div id="box3">网页网页</div>
 <div id="box3">孝感</div>
 <div id="box3">枝江</div>
 <div id="box3">汉川</div>
 <div id="box3">还有</div>
    <div id="box3">asp教程</div>
 
</div>
</div>
<!---->
</body>

时间: 2024-09-10 14:13:38

css +javascript 模仿select效果代码的相关文章

JS模拟实现Select效果代码_javascript技巧

本文实例讲述了JS模拟实现Select效果代码.分享给大家供大家参考.具体如下: 这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-select-style-demo-codes/ 具体代码如下: <!DOCT

css实现图片圆角效果代码

 代码如下 复制代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

javascript tips提示效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head> <title>网页特效 tips提示效果代码</title> <style type="text/css教程&quo

JS+CSS实现闪烁字体效果代码_javascript技巧

本文实例讲述了JS+CSS实现闪烁字体效果的方法.分享给大家供大家参考,具体如下: <div id="blink">闪烁的文字</div> <script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.spli

JavaScript CSS创建右击菜单效果代码_导航菜单

右键菜单创建测试效果吧! 后退 前进 photoshop教程 javascript vbscript 软件下载 源码下载 正则表达式 联系我

css div模仿select下拉框跳转效果

请选择▲ 1 2 3

三款css横向二级菜单效果代码(1/2)

 代码如下 复制代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"&g

原生javascript选项卡切换效果代码

原生javascript效果:选项卡切换//www.111cn.net/js_a/javascript/h○○@http://www.111cn.net/js_a/javascript/0$@○○> jquery javascript css //www.111cn.net/js_a/javascript/h4> jquery选项卡 jquery焦点图 jquery表单验证 jquery特效 原生javascript javascript特效 javascript笔记 css sprites

JavaScript拖拽效果代码

我们先来看个jquery拖拽效果,只要监测mousedown与mousemove mouseup就可以了,下面看实例  代码如下 复制代码 <!doctype html> <head> <script src="jquery-1.3.2.min.js"></script> <style> .test{text-align:center;width:300px;height:30px;line-height:30px;backg