css+js实现select列表横向排列效果代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > css+js实现select列表横向排列效果代码

Javascript: 动态生成select选项全接触; 不刷新页面动态更新select选项，实现两个select相互操作; 网页输入框日期型有效性判定一网打尽; 实用Javascript函数之一(自动将输入文本框中的内容转换成大写字符); 实用Javascript函数之二(自动将输入文本框中的内容转换成小写字符); 实用Javascript函数之三(限制文本输入框中只能输入数字\"0\"到\"9\"); 实用Javascript函数之四(用于对sString字符串进行前空格截除); 实用Javascript函数之五(用于对sString字符串进行后空格截除); 实用Javascript函数之六(截除字符串前后空格); 如何使用交替的滚动标题; 采用DOM模型时创建一个Select节点后，要删除option项的解决方法; javascript函数速查; 利用JavaScript和正则表达式进行丰富的日期判断（给其它项目组的代码，有比较好的编程风格和注释）; 关于字符串的几个有用函数; FileSystemObject 的例子（处理驱动器、文件夹、文件）; 用JScript实现VB.Net,C#的[委托Delegate]:; 得到固定字符位置的函数; IE NC通用的藏鼠标右键一法; Menu; foolpot2001菜单

No. « ‹ 3 4 5 6 › »

技术文章搜索

关键字

Javascript 中的 css+js实现select列表横向排列效果代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 99 ::

收藏到网摘: n/a

很酷的javascript loading效果代码非常不错的弹出一个div的js代码

真不错的select横排效果代码，推荐大家阅读，这个思路真不错，太感谢作者了

点击运行可以看到效果:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>请选择ABCDEFGHI_select横排效果_软晨学习网</title>
</head>
<body>
<style>
*{font-size:12px;}
A.s_l { BORDER: #dddddd 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #ffffff;PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px
}
A.s_l:hover { BORDER: #003366 1px solid;BORDER-right: #dddddd 0px solid; BACKGROUND: #0063dc;COLOR: #ffffff; TEXT-DECORATION: none;line-height:12px
}
A.s_r { BORDER: #dddddd 1px solid;BACKGROUND: #ffffff; PADDING: 4px 6px 2px 6px; TEXT-DECORATION: none;line-height:12px
}
A.s_r:hover { BORDER: #003366 1px solid;BACKGROUND: #0063dc;COLOR: #ffffff; TEXT-DECORATION: none;line-height:12px
}
input {BORDER: #aaa 1px solid;width:65px;height:23px;PADDING: 4px 6px 0px 6px;background:url(http://bbs.blueidea.com/attachment.php?aid=90338&noupdate=yes) no-repeat 95% center;}
.span1 {position:relative;top:3px;}
.span2 {position:relative;left:-3px;top:1px}
</style>
<span class="span1"><input type="text" value="请选择" onclick="sele(this)"></span>
<span class="span2" id="select" style="display:none"><A class=s_l
href="###">A</A><A class=s_l
href="###">B</A><A class=s_l
href="###">C</A><A class=s_l
href="###">D</A><A class=s_l
href="###">E</A><A class=s_l
href="###">F</A><A class=s_l
href="###">G</A><A class=s_l
href="###">H</A><A class=s_r
href="###">I</A></span>
<script>
function sele(o){ var oobj=document.getElementById("select") if (oobj.style.display=="none"){ oobj.style.display="" var obj=oobj.getElementsByTagName("a"),j=obj.length for (var i=0;i<j;i++){ obj[i].onclick=function(){ o.value=this.innerHTML; oobj.style.display="none" } } } else oobj.style.display="none"
}
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

很酷的javascript loading效果代码非常不错的弹出一个div的js代码

Javascript 中的 css+js实现select列表横向排列效果代码

评论 (0) All