首页
所有分类
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中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
JS中操作JSON总结
Dec 06 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
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
Hive(5) HttpClient(1) dataBinding(1) Quartz(1) 注解(1) BottomSheetDialog(1) scrapy(1) RestTemplate(1) ip2region(1) 反射(1)
You might like
怎样在php中使用PDF文档功能
2006/10/09 PHP
php在项目中寻找代码的坏味道（综艺命名）
2012/07/19 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
初学JavaScript第二章
2008/09/30 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
python查看FTP是否能连接成功的方法
2015/07/30 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Django 路由控制的实现
2019/07/17 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python测试线程应用程序过程解析
2019/12/31 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
Yahoo-PHP面试题2
2014/12/06 面试题
大学教师年终总结的自我评价
2013/10/29 职场文书
会务接待方案
2014/02/27 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
Python IO文件管理的具体使用
2022/03/20 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python