<!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和图片美化下拉列表选择框（select)-JS特效学院|Jsweb8.cn</title>
<style type="text/css">
/*
make by 穿皮鞋的青蛙
QQ:66118181
email:accord1104@hotmail.com
欢迎光临JS特效学院http://www.jsweb8.cn
*/
body{
font-size:12px; margin:0
}
.wenzi{ float:left; height:20px; line-height:20px}
/*年龄select1*/
#age_sel_1 div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 0;padding:0 10px;line-height:22px;}
#age_sel_1 div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;}
#age_sel_1 div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;}
#age_sel_1 ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;}
#age_sel_1 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;}
#age_sel_1 ul.tag_options li.open_hover{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -88px;color:#000}
#age_sel_1 ul.tag_options li.open_selected{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -66px;color:#19555F}
/*年龄select1--end*/
/*年龄select2*/
#age_sel_2 div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.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("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.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("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.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("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;}
#age_sel_2 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.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("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -88px;color:#000}
#age_sel_2 ul.tag_options li.open_selected{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -66px;color:#19555F}
/*年龄select2--end*/
/*地区select1*/
#area_sel_1 div.tag_select{display:block;color:#000;width:82px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 0;padding:0 10px;line-height:22px;}
#area_sel_1 div.tag_select_hover{display:block;color:#000;width:82px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;}
#area_sel_1 div.tag_select_open{display:block;color:#000;width:82px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;}
#area_sel_1 ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat left bottom;width:100px;padding:0 0 1px;margin:0;width:80px;}
#area_sel_1 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;}
#area_sel_1 ul.tag_options li.open_hover{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 -88px;color:#000}
#area_sel_1 ul.tag_options li.open_selected{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-80.gif") no-repeat 0 -66px;color:#19555F}
/*地区select1--end*/
/*地区select2*/
#area_sel_2 div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 0;padding:0 10px;line-height:22px;}
#area_sel_2 div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;}
#area_sel_2 div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;}
#area_sel_2 ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;}
#area_sel_2 ul.tag_options li{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;}
#area_sel_2 ul.tag_options li.open_hover{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -88px;color:#000}
#area_sel_2 ul.tag_options li.open_selected{background:transparent url("http://www.jsweb8.cn/jsweb8/select_css/images/select-60.gif") no-repeat 0 -66px;color:#19555F}
/*地区select2--end*/
-->
</style>
<script>/*#############################################################
Name: Select to CSS
Version: 0.2
Author: Utom
URL: http://utombox.com/
#############################################################*/
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.canc
36个javascript脚本
需积分: 0 83 浏览量
2009-06-27
08:43:53
上传
评论
收藏 54KB RAR 举报
,很好用的js脚本.rar （36个子文件） 
一些很酷,很好用的js脚本 
JS树形菜单.html 14KB
令人震撼的图片展示效果01.txt 7KB 一个超酷弹出窗口的小效果.html 7KB 连续滚动.txt 2KB 兼容ie和火狐firefox的js调用flash播放器代码特效.html 1KB 显示新历、农历、星期的日期代码.html 7KB 背景变暗的div可拖动提示窗口，兼容IE、Firefox、Opera.txt 4KB 焦点图片轮换第三季 — iFocus.html 8KB js 动态为talbe 添加行.html 2KB 时间够了再跳转.html 484B 焦点图片轮换第三季.txt 8KB 异步通讯.txt 4KB 无间断循环滚动（兼容IE、FF）.txt 991B 让按钮倒计时10秒以后才能提交.html 284B js随机显示文本特效.txt 219B 简单的js随机显示图片特效.txt 353B 自动切换的选项卡特效代码.txt 2KB JS+CSS和图片美化下拉列表选择框（select).txt 14KB
input框的增加.htm 378B 令人震撼的图片展示效果03.html 4KB 遮住网页某部分内容的下拉菜单.txt 5KB 网页手写板特效.htm 4KB CSS+JS实现文字色彩渐变.txt 5KB WEB标准写法的文字向上滚动特效.html 3KB 可多次使用的仿126邮箱选项卡的源码.txt 4KB 关闭窗口后弹出对话框.htm 378B 舒服的颜色.txt 3KB 51jpb选择城市功能特效代码.htm 15KB 令人震撼的图片展示效果02.txt 9KB tab标签自动切换（jquery）.txt 2KB js下拉导航菜单实例.txt 4KB 可刷新的JS树形菜单特效.html 6KB 来自动网的打字效果 还不错！.txt 3KB 模拟ightbox提示框演示特效.html 7KB 父窗体向子窗体的图片控件填值.txt 136B 装载iframe 子页面，自适应高度.txt 793B资源评论
