css+js实现select列表横向排列效果代码
请选择ABCDEFGHI_select横排效果_我们
*{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}
ABCDEFGHI
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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
select下拉选择框美化实现代码(js+css+图片)
因为虽然实现起来麻烦点,如果用自带的Select,很简单的就完成了,但是本代码实际上是在向大家讲述一种Js在网页中的应用实战,多种元素之间的配合作用等.效果如下图: 下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;}
-
用JavaScript来美化HTML的select标签的下拉列表效果
首先通过一个例子来回顾一下select标签的用法: <html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">
-
用javascript来实现select标签的美化的代码
论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的.昨天试着做了一下,基本实现的初级功能.拿出来和大家一起分享一下.先可以看一下预览效果:http://www.iwcn.net/demo/select. [功能需求] 1.调用要方便,做好之后应该像这样: 程序代码 function loadSelect(selectobj){ //传入一个select对象就能将他的样式美化 } 2.不改变原有表单项,表单的页面代码不去破坏: 程序代码 <f
-
用javascript实现select的美化的方法
论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的.昨天试着做了一下,基本实现的初级功能.拿出来和大家一起分享一下.先可以看一下预览效果:http://www.iwcn.net/demo/select. [功能需求] 1.调用要方便,做好之后应该像这样: 复制代码 代码如下: function loadSelect(selectobj){ //传入一个select对象就能将他的样式美化 } 2.不改变原有表单项,表单的页面代码不去破坏:
-
select标记美化--JS式插件、后期加载
<select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰. 在这将本人对<select>的美化方法共享出来.优点: 仍保留使用<select>,仅改变外观,不改变不干预Form行为,后期加载JS.(注:本脚本依赖jQuery) 啥也不说了,都在代码里.效果图在底部. 复制代码 代码如下: $(document).ready(function () { // 找出需要美化的<select>标记,我们用一个cl
-
用javascript和css模拟select的脚本
模拟 美化 select_我们 var zQuery=function(ele,tagName,className){ //核心对象 if ( window == this ) return new zQuery(ele,tagName,className); if(!arr){var arr=new Array;} if(ele){ if(ele.constructor!=zQuery){ var elem=typeof(ele)=="object"?ele:document.get
-
js+css实现select的美化效果
先给大家看一看美化之后的效果图: CSS: .div-select { border: solid 1px #999; height: 40px; line-height: 40px; cursor: default; } .div-select-text { float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; } .div-sele
-
select标签模拟/美化方法采用JS外挂式插件
<select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰. 在这将本人对<select>的美化方法共享出来.优点: 仍保留使用<select>,仅改变外观,不改变不干预Form行为,后期加载JS.(注:本脚本依赖jQuery) 啥也不说了,都在代码里. 复制代码 代码如下: $(document).ready(function () { // 找出需要美化的<select>标记,我们用一个class名称 &
-
IE6下js通过css隐藏select的一个bug
今天遇到一个问题, 当隐藏表格行 Tr 时 $id("tr_" + id + "_1").style.setAttribute('cssText',"display:none;");, 表格行 Tr 里面的 select 在 IE6 中隐藏不了,还是会显示在页面当中.想单独设置 select 的样式为隐藏 $id("new_attpm_id2_" + id).style.setAttribute('cssText',"
-
css+js实现select列表横向排列效果代码
请选择ABCDEFGHI_select横排效果_我们 *{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-rig
-
js钢琴按钮波浪式图片排列效果代码分享
本文实例讲述了js钢琴按钮波浪式图片排列效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 注意:图片的alt属性不能
-
php 遍历数据表数据并列表横向排列的代码
复制代码 代码如下: <?php $a = array (1,2,3,4,5,6,7,8,9,10,11); $i = 0; ?> <table border=1> <tr> <? foreach ($a as $k){ if($i%3==0) {//该处表示需要横向排列的列数. echo "</tr><tr>"; } echo "<td>",$k,"</td>&qu
-
JS 动态添加列表框项效果代码
*请选择1-3个知识点. 1213123123 2123123123 3213123213 4123213213 5213123213 6213123213 var addTo = document.getElementById("addto"); var moveBack = document.getElementById("moveback"); var selectLeft = document.getElementById("selectleft&
-
js实现Select列表内容自动滚动效果代码
本文实例讲述了js实现Select列表内容自动滚动效果.分享给大家供大家参考.具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调节的.或许你会用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-font-scroll-codes/ 具体代码如下: <html> <head> <title&g
-
js实现Select列表各项上移和下移的方法
本文实例讲述了js实现Select列表各项上移和下移的方法.分享给大家供大家参考.具体如下: 这里介绍Select列表各项上移和下移的Js代码,可以手功排序,以前我们都见到过的,从事WEB编程的朋友经常会用得到. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-move-up-down-codes/ 具体代码如下: <html> <head> <title>Select列表各项上移和下移</t
-
Vue.js仿Select下拉框效果
本文实例为大家分享了Vue.js仿Select下拉框效果的具体代码,供大家参考,具体内容如下 废话少说,直接上图上代码: 效果图: HEML: <div id="demo"> <h2 class="title">自定义下拉框</h2> <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-se
-
JS+CSS实现大气清新的滑动菜单效果代码
本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC
-
JS+CSS实现的竖向简洁折叠菜单效果代码
本文实例讲述了JS+CSS实现的竖向简洁折叠菜单效果代码.分享给大家供大家参考,具体如下: 这是一款JS+CSS竖向简洁的折叠菜单,支持三级分类,红色垂直型,个人感觉非常棒,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zd-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
-
JS实现横向拉伸动感伸缩菜单效果代码
本文实例讲述了JS实现横向拉伸动感伸缩菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS实现的纵向拉伸变横向拉伸,动感伸缩菜单,紧身排列的CSS菜单,可用在博客等重要的位置部分作菜单,学习JavaScript前端设计的也可以作为参考范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-row-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD
随机推荐
- PHP基于回溯算法解决n皇后问题的方法示例
- Hibernate通用数据库操作代码
- 关于vbs 生成静态页面过程中出现的问题
- 在Mac OS上安装Go语言编译器的方法
- MySQL删除有外键约束的表数据方法介绍
- 详解iOS使用Keychain中的kSecClassGenericPassword存储数据
- React Native第三方平台分享的实例(Android,IOS双平台)
- 使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码
- Java游戏服务器之数据库表存取封装
- 工作需要写的一个js拖拽组件
- C#开发微信门户及应用(1) 微信接口使用
- Android Recyclerview实现上拉加载更多功能
- Android接入支付宝实现支付功能实例
- Yii框架登录流程分析
- 网跃科技为您提供免费100M全能型空间
- python3获取当前文件的上一级目录实例
- python excel使用xlutils类库实现追加写功能的方法
- 对python:循环定义多个变量的实例详解
- Android Studio 在项目中引用第三方jar包的方法
- Oracle自定义脱敏函数的代码详解