首页
所有分类
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 相关文章推荐
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
原生js+css调节音量滑块
Jan 15 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
Docker(14) 东方异文石(1) 我的世界(1) 守望先锋(1) 艾尔登法环(1) 小缇娜的奇幻之地(1) 巫师(1) 最终幻想(1) 帝国时代(1) 暴雪(1)
You might like
php全排列递归算法代码
2012/10/09 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php ios推送(代码)
2013/07/01 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
Prototype Template对象 学习
2009/07/19 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
python实现telnet客户端的方法
2015/04/15 Python
Python2.6版本中实现字典推导 PEP 274（Dict Comprehensions）
2015/04/28 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
2014年大学生自我评价
2014/01/19 职场文书
党支部三会一课计划
2014/09/24 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
2019年入党思想汇报
2019/03/25 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
关于JavaScript轮播图的实现
2021/11/20 Javascript
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android