首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS+CSS实现美化的下拉列表框效果

Posted in Javascript onAugust 11, 2015

本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下：

一款经过JS+CSS美化的下拉列表，效果很不错，但代码有点偏多，学习CSS的朋友可以学习一下方法，然后自己变通一下，把代码简化一下。

运行效果如下图所示：

JS+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="Content-Type" content="text/html; charset=gb2312" />
<title>JS+CSS下拉列表</title>
<style type="text/css">
body{
 font-size:12px; margin:0
}
.center{ margin-left:auto; margin-right:auto; margin-top:200px; width:300px;}
#age_sel_2 div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent url("//img.jbzj.com/file_images/article/201508/2015811145849095.gif") no-repeat 0 0;padding:0 10px;line-height:22px;}
#age_sel_2 div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent url("//img.jbzj.com/file_images/article/201508/2015811145849095.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;}
#age_sel_2 div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent url("//img.jbzj.com/file_images/article/201508/2015811145849095.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;}
#age_sel_2 ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("//img.jbzj.com/file_images/article/201508/2015811145849095.gif") no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;}
#age_sel_2 ul.tag_options li{background:transparent url("//img.jbzj.com/file_images/article/201508/2015811145849095.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;}
#age_sel_2 ul.tag_options li.open_hover{background:transparent url("//img.jbzj.com/file_images/article/201508/2015811145849095.gif") no-repeat 0 -88px;color:#000}
#age_sel_2 ul.tag_options li.open_selected{background:transparent url("//img.jbzj.com/file_images/article/201508/2015811145849095.gif") no-repeat 0 -66px;color:#19555F}
</style>
<script>
var selects = document.getElementsByTagName('select');
var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false;
function $(id) {
 return document.getElementById(id);
}
function stopBubbling (ev) { 
 ev.stopPropagation();
}
function rSelects() {
 for (i=0;i<selects.length;i++){
 selects[i].style.display = 'none';
 select_tag = document.createElement('div');
  select_tag.id = 'select_' + selects[i].name;
  select_tag.className = 'select_box';
 selects[i].parentNode.insertBefore(select_tag,selects[i]);
 select_info = document.createElement('div'); 
  select_info.id = 'select_info_' + selects[i].name;
  select_info.className='tag_select';
  select_info.style.cursor='pointer';
 select_tag.appendChild(select_info);
 select_ul = document.createElement('ul'); 
  select_ul.id = 'options_' + selects[i].name;
  select_ul.className = 'tag_options';
  select_ul.style.position='absolute';
  select_ul.style.display='none';
  select_ul.style.zIndex='999';
 select_tag.appendChild(select_ul);
 rOptions(i,selects[i].name);
 mouseSelects(selects[i].name);
 if (isIE){
  selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble = true;");
 }
 else if(!isIE){
  selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"')");
  selects[i].addEventListener("click", stopBubbling, false);
 } 
 }
}
function rOptions(i, name) {
 var options = selects[i].getElementsByTagName('option');
 var options_ul = 'options_' + name;
 for (n=0;n<selects[i].options.length;n++){ 
 option_li = document.createElement('li');
  option_li.style.cursor='pointer';
  option_li.className='open';
 $(options_ul).appendChild(option_li);
 option_text = document.createTextNode(selects[i].options[n].text);
 option_li.appendChild(option_text);
 option_selected = selects[i].options[n].selected;
 if(option_selected){
  option_li.className='open_selected';
  option_li.id='selected_' + name;
  $('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML));
 }
 option_li.onmouseover = function(){ this.className='open_hover';}
 option_li.onmouseout = function(){
  if(this.id=='selected_' + name){
  this.className='open_selected';
  }
  else {
  this.className='open';
  }
 } 
 option_li.onclick = new Function("clickOptions("+i+","+n+",'"+selects[i].name+"')");
 }
}
function mouseSelects(name){
 var sincn = 'select_info_' + name;
 $(sincn).onmouseover = function(){ if(this.className=='tag_select') this.className='tag_select_hover'; }
 $(sincn).onmouseout = function(){ if(this.className=='tag_select_hover') this.className='tag_select'; }
 if (isIE){
 $(sincn).onclick = new Function("clickSelects('"+name+"');window.event.cancelBubble = true;");
 }
 else if(!isIE){
 $(sincn).onclick = new Function("clickSelects('"+name+"');");
 $('select_info_' +name).addEventListener("click", stopBubbling, false);
 }
}
function clickSelects(name){
 var sincn = 'select_info_' + name;
 var sinul = 'options_' + name; 
 for (i=0;i<selects.length;i++){ 
 if(selects[i].name == name){  
  if( $(sincn).className =='tag_select_hover'){
  $(sincn).className ='tag_select_open';
  $(sinul).style.display = '';
  }
  else if( $(sincn).className =='tag_select_open'){
  $(sincn).className = 'tag_select_hover';
  $(sinul).style.display = 'none';
  }
 }
 else{
  $('select_info_' + selects[i].name).className = 'tag_select';
  $('options_' + selects[i].name).style.display = 'none';
 }
 }
}
function clickOptions(i, n, name){ 
 var li = $('options_' + name).getElementsByTagName('li');
 $('selected_' + name).className='open';
 $('selected_' + name).id='';
 li[n].id='selected_' + name;
 li[n].className='open_hover';
 $('select_' + name).removeChild($('select_info_' + name));
 select_info = document.createElement('div');
 select_info.id = 'select_info_' + name;
 select_info.className='tag_select';
 select_info.style.cursor='pointer';
 $('options_' + name).parentNode.insertBefore(select_info,$('options_' + name));
 mouseSelects(name);
 $('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML));
 $( 'options_' + name ).style.display = 'none' ;
 $( 'select_info_' + name ).className = 'tag_select';
 selects[i].options[n].selected = 'selected';
}
window.onload = function(e) {
 bodyclick = document.getElementsByTagName('body').item(0);
 rSelects();
 bodyclick.onclick = function(){
 for (i=0;i<selects.length;i++){ 
  $('select_info_' + selects[i].name).className = 'tag_select';
  $('options_' + selects[i].name).style.display = 'none';
 }
 }
}</script>
</head>
<body>
<div class="center">
<div id="age_sel_2">
 <select name="area_selet2" id="area_select2">
  <option value="请选择">请选择</option>
  <option value="ASP" >ASP</option>
  <option value="PHP" >PHP</option>
  <option value=".NET" >.NET</option>
  <option value="Csharp" >Csharp</option>
  <option value="Delphi" >Delphi</option>
  <option value="Java" >Java</option>
 </select>
</div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

JS+CSS实现美化的下拉列表框效果

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
localResizeIMG先压缩后使用ajax无刷新上传（移动端）
Aug 11 #Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 #Javascript
js限制文本框只能输入中文的方法
Aug 11 #Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 #Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 #Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 #Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 #Javascript
SRF-M100(1) SRF-40W(1) 安健(1) 德劲1107(1) 上海永华(1) 华普R-96(1) SRF-22W(1) 德劲1102(1) YH-R296(1) A254(1)
You might like
mysq GBKl乱码
2006/11/28 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
微信小程序技巧之show内容展示，上传文件编码问题
2017/01/23 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python 串行执行和并行执行实例
2020/04/30 Python
Python实现EM算法实例代码
2020/10/04 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
土木工程毕业生推荐信
2013/10/28 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
皇城相府导游词
2015/02/06 职场文书
大学生个人学习总结
2015/02/15 职场文书
教师考核鉴定意见
2015/06/05 职场文书
董事长新年致辞
2015/07/29 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
python实现商品进销存管理系统
2022/05/30 Python