经验分享程序开发文档资料数据资源其它资源

select下拉菜单美化特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 select下拉菜单美化特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

select下拉菜单美化特效代码

HTML代码(index.html):

<!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" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为select下拉菜单美化，属于站长常用代码" />
<title>select下拉菜单美化</title>
<style type="text/css">
<!--
	@import url(css/select2css.css);
-->
</style>
<script type="text/javascript" src="js/select2css.js"></script>
</head>
<body>
<form id="form" name="form" method="post" action="">
  <br />
<div id="uboxstyle">
<h3 style="color:#6D93AB;font-size:14px;">U-Box Style</h3>
	<select name="language" id="language">
		<option value="English"  selected="selected">English</option>
		<option value="简体中文" >简体中文</option>
		<option value="日本語" >日本語</option>
		<option value="Deutsch" >Deutsch</option>
		<option value="Espa?ol" >Espa?ol</option>
		<option value="Fran?ais" >Fran?ais</option>
		<option value="Italiano" >Italiano</option>
		<option value="Polski" >Polski</option>
		<option value="Português" >Português</option>
		<option value="Svenska" >Svenska</option>
		<option value="Türk?e" >Türk?e</option>
		<option value="Руccкий" >Руccкий</option>
	</select>
</div>
<br /><br />
<h3 style="color:#6D93AB;font-size:14px;">Mac Style</h3>
<div id="macstyle">
	<select name="language_mac" id="language_mac">
		<option value="English"  selected="selected">English</option>
		<option value="简体中文" >简体中文</option>
		<option value="日本語" >日本語</option>
		<option value="Deutsch" >Deutsch</option>
		<option value="Espa?ol" >Espa?ol</option>
		<option value="Fran?ais" >Fran?ais</option>
		<option value="Italiano" >Italiano</option>
		<option value="Polski" >Polski</option>
		<option value="Português" >Português</option>
		<option value="Svenska" >Svenska</option>
		<option value="Türk?e" >Türk?e</option>
		<option value="Руccкий" >Руccкий</option>
	</select>
</div>
<br /><br />
<h3 style="color:#6D93AB;font-size:14px;">TM2008 Style</h3>
<div id="tm2008style">
	<select name="language_tm2008" id="language_tm2008">
		<option value="English">English</option>
		<option value="简体中文" >简体中文</option>
		<option value="日本語" >日本語</option>
		<option value="Deutsch" >Deutsch</option>
		<option value="Espa?ol" >Espa?ol</option>
		<option value="Fran?ais" >Fran?ais</option>
		<option value="Italiano" >Italiano</option>
		<option value="Polski" >Polski</option>
		<option value="Português" >Português</option>
		<option value="Svenska" >Svenska</option>
		<option value="Türk?e" >Türk?e</option>
		<option value="Руccкий" >Руccкий</option>
	</select>
</div>
</form>
</body>
</html>

JS代码(select2css.js):

/*#############################################################Name:Select to CSSVersion:0.2Author:UtomURL: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.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';
}
}
}

CSS代码(select2css.css):

body{background:#CFDFEF;font:12px/150% "Lucida Grande",Arial,Verdana,Helvetica,sans-serif;}
#uboxstyle .select_box{width:100px;height:24px;}
#macstyle .select_box{width:91px;height:24px;}
#tm2008style .select_box{width:102px;height:24px;}
#uboxstyle div.tag_select{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("../images/ubox-select.gif") no-repeat 0 0;padding:0 10px;line-height:24px;}
#uboxstyle div.tag_select_hover{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("../images/ubox-select.gif") no-repeat 0 -24px;padding:0 10px;line-height:24px;}
#uboxstyle div.tag_select_open{display:block;color:#79A2BD;width:80px;height:24px;background:transparent url("../images/ubox-select.gif") no-repeat 0 -48px;padding:0 10px;line-height:24px;}
#uboxstyle ul.tag_options{position:absolute;padding:0;margin:0;list-style:none;background:transparent url("../images/ubox-select.gif") no-repeat right bottom;width:100px;padding:0 0 5px;margin:0;}
#uboxstyle ul.tag_options li{background:transparent url("../images/ubox-select.gif") repeat-y -100px 0;display:block;width:80px;padding:0 10px;height:24px;text-decoration:none;line-height:24px;color:#79A2BD;}
#uboxstyle ul.tag_options li.open_hover{background:transparent url("../images/ubox-select.gif") no-repeat 0 -72px;color:#fff}
#uboxstyle ul.tag_options li.open_selected{background:transparent url("../images/ubox-select.gif") no-repeat 0 -96px;color:#fff}
#macstyle div.tag_select{display:block;color:#000;width:71px;height:24px;background:transparent url("../images/mac-select.gif") no-repeat 0 -24px;padding:0 10px;line-height:24px;}
#macstyle div.tag_select_hover{display:block;color:#000;width:71px;height:24px;background:transparent url("../images/mac-select.gif") no-repeat 0 0;padding:0 10px;line-height:24px;}
#macstyle div.tag_select_open{display:block;color:#000;width:71px;height:24px;background:transparent url("../images/mac-select.gif") no-repeat 0 -48px;padding:0 10px;line-height:24px;}
#macstyle ul.tag_options{position:absolute;margin:-4px 0 0;list-style:none;background:transparent url("../images/mac-select.gif") no-repeat left bottom;width:100px;padding:0 0 5px;margin:0;width:71px;}
#macstyle ul.tag_options li{background:transparent url("../images/mac-select.gif") repeat-y -91px 0;display:block;width:61px;padding:0 0 0 10px;height:24px;text-decoration:none;line-height:24px;color:#000;}
#macstyle ul.tag_options li.open_hover{background:transparent url("../images/mac-select.gif") no-repeat -162px 0;color:#000}
#macstyle ul.tag_options li.open_selected{background:transparent url("../images/mac-select.gif") no-repeat -162px -24px;color:#fff}
#tm2008style div.tag_select{display:block;color:#000;width:82px;height:22px;background:transparent url("../images/tm2008-select.gif") no-repeat 0 0;padding:0 10px;line-height:22px;}
#tm2008style div.tag_select_hover{display:block;color:#000;width:82px;height:22px;background:transparent url("../images/tm2008-select.gif") no-repeat 0 -22px;padding:0 10px;line-height:22px;}
#tm2008style div.tag_select_open{display:block;color:#000;width:82px;height:22px;background:transparent url("../images/tm2008-select.gif") no-repeat 0 -44px;padding:0 10px;line-height:22px;}
#tm2008style ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url("../images/tm2008-select.gif") no-repeat left bottom;width:100px;padding:0 0 1px;margin:0;width:80px;}
#tm2008style ul.tag_options li{background:transparent url("../images/tm2008-select.gif") repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;}
#tm2008style ul.tag_options li.open_hover{background:transparent url("../images/tm2008-select.gif") no-repeat 0 -88px;color:#000}
#tm2008style ul.tag_options li.open_selected{background:transparent url("../images/tm2008-select.gif") no-repeat 0 -66px;color:#19555F}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
18.09 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
18.09 KB
立即下载
文妍蓉倩
了解
打赏作者 鼓励作者
Html JS 其它特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章