<!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
没有合适的资源?快使用搜索试试~ 我知道了~
一些很酷,很好用的js脚本
共36个文件
txt:32个
htm:4个
需积分: 17 3 下载量 188 浏览量
2008-11-23
11:08:51
上传
评论
收藏 49KB RAR 举报
温馨提示
很酷,很好用的js脚本,相信你一定不会错过
资源详情
资源评论
资源推荐
收起资源包目录
javascript01.rar (36个子文件)
js 动态为talbe 添加行.txt 2KB
令人震撼的图片展示效果01.txt 7KB
JS树形菜单.txt 14KB
兼容ie和火狐firefox的js调用flash播放器代码特效.txt 1KB
可刷新的JS树形菜单特效.txt 6KB
连续滚动.txt 2KB
令人震撼的图片展示效果03.txt 4KB
背景变暗的div可拖动提示窗口,兼容IE、Firefox、Opera.txt 4KB
时间够了再跳转.txt 444B
一个超酷弹出窗口的小效果.txt 7KB
焦点图片轮换第三季.txt 8KB
异步通讯.txt 4KB
无间断循环滚动(兼容IE、FF).txt 991B
js随机显示文本特效.txt 219B
简单的js随机显示图片特效.txt 353B
自动切换的选项卡特效代码.txt 2KB
JS+CSS和图片美化下拉列表选择框(select).txt 14KB
input框的增加.htm 378B
遮住网页某部分内容的下拉菜单.txt 5KB
模拟ightbox提示框演示特效.txt 7KB
焦点图片轮换第三季 — iFocus.txt 8KB
网页手写板特效.htm 4KB
CSS+JS实现文字色彩渐变.txt 5KB
显示新历、农历、星期的日期代码.txt 7KB
可多次使用的仿126邮箱选项卡的源码.txt 4KB
关闭窗口后弹出对话框.htm 378B
舒服的颜色.txt 3KB
51jpb选择城市功能特效代码.htm 15KB
令人震撼的图片展示效果02.txt 9KB
tab标签自动切换(jquery).txt 2KB
js下拉导航菜单实例.txt 4KB
来自动网的打字效果 还不错!.txt 3KB
让按钮倒计时10秒以后才能提交.txt 284B
父窗体向子窗体的图片控件填值.txt 136B
WEB标准写法的文字向上滚动特效.txt 3KB
装载iframe 子页面,自适应高度.txt 793B
共 36 条
- 1
xiaohan1219
- 粉丝: 1
- 资源: 14
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0