首页
所有分类
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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
判断ie的两种简单方法
Aug 12 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
使用 JavaScript 制作页面效果
Apr 21 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
TcpServer(1) muduo(1) EventBus(1) Sqlite(2) 多线程(6) ICF-5900W(2) Fragment(1) 多维数组(1) Spring-Retry(1) Spring Boot(5)
You might like
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Redis构建分布式锁
2017/03/28 PHP
php 可变函数使用小结
2018/06/12 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
怎样使你的 JavaScript 代码简单易读（推荐）
2019/04/16 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
python实现的重启关机程序实例
2014/08/21 Python
Python3 Random模块代码详解
2017/12/04 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python实现感知机（PLA）算法
2017/12/20 Python
[原创]python爬虫（入门教程、视频教程）
2018/01/08 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python logging通过json文件配置的步骤
2020/04/27 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
魔声耳机官方网站：Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
加拿大时尚潮流大码女装购物网站：Addition Elle
2018/04/02 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
美德好少年事迹材料
2014/01/19 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
python可视化之颜色映射详解
2021/09/15 Python