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程序设计有所帮助。

Javascript 相关文章推荐
javascript根据像素点取位置示例
Jan 27 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
对比分析json及XML
Nov 28 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 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
You might like
论建造顺序的重要性
2020/03/04 星际争霸
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python最小二乘法矩阵
2019/01/02 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
Python实现京东秒杀功能代码
2019/05/16 Python
通过cmd进入python的实例操作
2019/06/26 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python