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

jQuery select下拉菜单js特效代码

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

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

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

部分效果截图:

jQuery select下拉菜单js特效代码

HTML代码(index.html):

<html>
	<head>
		<meta charset="gb2312" />
		<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=1"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
			<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<![endif]-->
		<title>jQuery select�����˵�</title>
		<link rel="stylesheet" type="text/css" href="demo.css"/>
		<link rel="stylesheet" type="text/css" href="themes/easydropdown.css"/>
		<script src="jquery.min.js"></script>
		<script src="src/jquery.easydropdown.js"></script>
		<title>EasyDropDown - A Drop-down Builder for Styleable Inputs and Menus</title>
	</head>
	<body>
		<header>
			<div class="wrapper just">
			<hgroup>
				<h1>jQuery EasyDropDown</h1>
				<h2>A Drop-down Builder for <strong>Styleable</strong> Inputs and Menus</h2>
			</hgroup>
			
			</div>
		</header>
		<section>
			<div class="col col_1">
				<div class="wrapper">
					<h3>What Is It?</h3>
					<p>EasyDropDown is a jQuery plugin that effortlessly turns humble <code>&lt;select&gt;</code> elements &hellip;</p>

					<fieldset>
						
						<select tabindex="1">
							<option value="" class="label">Month</option>
							<option value="1">January</option>
							<option value="2">February</option>
							<option value="3">March</option>
							<option value="4">April</option>
							<option value="5">May</option>
							<option value="6">June</option>
							<option value="7">July</option>
							<option value="8">August</option>
							<option value="9">September</option>
							<option value="10">October</option>
							<option value="11">November</option>
							<option value="12">December</option>
						</select>
					
						<select tabindex="2">
							<option value="" class="label">Day</option>
							<option value="1">1</option>
							<option value="2">2</option>
					        <option value="3">3</option>
					        <option value="4">4</option>
					        <option value="5">5</option>
					        <option value="6">6</option>
					        <option value="7">7</option>
					        <option value="8">8</option>
					        <option value="9">9</option>
					        <option value="10">10</option>
					        <option value="11">11</option>
					        <option value="12">12</option>
					        <option value="13">13</option>
					        <option value="14">14</option>
					        <option value="15">15</option>
					        <option value="16">16</option>
					        <option value="17">17</option>
					        <option value="18">18</option>
					        <option value="19">19</option>
					        <option value="20">20</option>
					        <option value="21">21</option>
					        <option value="22">22</option>
					        <option value="23">23</option>
					        <option value="24">24</option>
					        <option value="25">25</option>
					        <option value="26">26</option>
					        <option value="27">27</option>
					        <option value="28">28</option>
					        <option value="29">29</option>
					        <option value="30">30</option>
					        <option value="31">31</option>
						</select>
					
						<select tabindex="3">
							<option value="" class="label">Year</option>
							<option value="2013">2013</option>
							<option value="2012">2012</option>
							<option value="2011">2011</option>
							<option value="2010">2010</option>
						    <option value="2009">2009</option>
						    <option value="2008">2008</option>
						    <option value="2007">2007</option>
						    <option value="2006">2006</option>
						    <option value="2005">2005</option>
						    <option value="2004">2004</option>
						    <option value="2003">2003</option>
						    <option value="2002">2002</option>
						    <option value="2001">2001</option>
						    <option value="2000">2000</option>
						    <option value="1999">1999</option>
						    <option value="1998">1998</option>
						    <option value="1997">1997</option>
						    <option value="1996">1996</option>
						    <option value="1995">1995</option>
						    <option value="1994">1994</option>
						    <option value="1993">1993</option>
						    <option value="1992">1992</option>
						    <option value="1991">1991</option>
						    <option value="1990">1990</option>
						</select>
					
					</fieldset>
				
					<p>&hellip; into <strong>styleable drop-down menus</strong> for use in forms or general UI/navigation.</p>
					
					<fieldset>
				
						<select tabindex="4" class="dropdown">
							<option value="" class="label" value="">Month</option>
							<option value="1">January</option>
							<option value="2">February</option>
							<option value="3">March</option>
							<option value="April">April</option>
							<option value="5">May</option>
							<option value="6">June</option>
							<option value="7">July</option>
							<option value="8">August</option>
							<option value="9">September</option>
							<option value="10">October</option>
							<option value="11">November</option>
							<option value="12">December</option>
						</select>
					
						<select tabindex="5" class="dropdown" data-settings='{"cutOff": 12}'>
							<option value="" class="label">Day</option>
							<option value="1">1</option>
							<option value="2">2</option>
					        <option value="3">3</option>
					        <option value="4">4</option>
					        <option value="5">5</option>
					        <option value="6">6</option>
					        <option value="7">7</option>
					        <option value="8">8</option>
					        <option value="9">9</option>
					        <option value="10">10</option>
					        <option value="11">11</option>
					        <option value="12">12</option>
					        <option value="13">13</option>
					        <option value="14">14</option>
					        <option value="15">15</option>
					        <option value="16">16</option>
					        <option value="17">17</option>
					        <option value="18">18</option>
					        <option value="19">19</option>
					        <option value="20">20</option>
					        <option value="21">21</option>
					        <option value="22">22</option>
					        <option value="23">23</option>
					        <option value="24">24</option>
					        <option value="25">25</option>
					        <option value="26">26</option>
					        <option value="27">27</option>
					        <option value="28">28</option>
					        <option value="29">29</option>
					        <option value="30">30</option>
					        <option value="31">31</option>
						</select>
					
						<select tabindex="6" class="dropdown" data-settings='{"cutOff": 12}'>
							<option value="" class="label">Year</option>
							<option value="2013">2013</option>
							<option value="2012">2012</option>
							<option value="2011">2011</option>
							<option value="2010">2010</option>
						    <option value="2009">2009</option>
						    <option value="2008">2008</option>
						    <option value="2007">2007</option>
						    <option value="2006">2006</option>
						    <option value="2005">2005</option>
						    <option value="2004">2004</option>
						    <option value="2003">2003</option>
						    <option value="2002">2002</option>
						    <option value="2001">2001</option>
						    <option value="2000">2000</option>
						    <option value="1999">1999</option>
						    <option value="1998">1998</option>
						    <option value="1997">1997</option>
						    <option value="1996">1996</option>
						    <option value="1995">1995</option>
						    <option value="1994">1994</option>
						    <option value="1993">1993</option>
						    <option value="1992">1992</option>
						    <option value="1991">1991</option>
						    <option value="1990">1990</option>
						</select>
					
					</fieldset>
				
					<p>It's like <em><a href="#/" target="_blank">Chosen</a></em> but with only the essential features:</p>
				
					<ul class="text">
						<li>Clean, semantic markup</li>
						<li>Form &amp; validation compatibilty</li>
						<li>Full keyboard control with textual search</li>
						<li>Inner-scroll for long lists</li>
						<li>Degradation to native UI on touch devices</li>
						<li>Fully functional IE8+</li>
					</ul>
				
					
					
					<h3>Latest updates v2.1.0</h3>
					
					<ul class="text">
						<li><strong>onSelect</strong> callback option renamed to <strong>onChange</strong></li>
						<li>Textual search strings reset after 1200ms of keyboard inactivity</li>
						<li><strong>disable</strong> method added</li>
						<li><strong>enable</strong> method added</li>
						<li><strong>select</strong> method added</li>
						<li><strong>destroy</strong> method added</li>
						<li>Support for <strong>disabled</strong> attribute on <code>&lt;select&gt;</code> element added</li>
						<li>Various bug fixes</li>
					</ul>
					
					<h3>Available Ready-made Themes</h3>
					
					<h4>Default / <a href="themes/easydropdown.css">easydropdown.css</a></h4>
					
					<select class="dropdown" tabindex="7">
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>
					
					<h4>Metro / <a href="themes/easydropdown.metro.css">easydropdown.metro.css</a></h4>
					
					<select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'>
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>
					
					<h4>Flat / <a href="themes/easydropdown.flat.css">easydropdown.flat.css</a></h4>
					
					<select class="dropdown" tabindex="9" data-settings='{"wrapperClass":"flat"}'>
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
						<option value="3">Option 3</option>
						<option value="4">Option 4</option>
						<option value="5">Option 5</option>
					</select>
				</div>
			</div>
			<p>&nbsp;</p>
			<p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>	
		</section>
	</body>
</html>

JS代码(jquery.easydropdown.js):

/** EASYDROPDOWN - A Drop-down Builder for Styleable Inputs and Menus* Version:2.1.3* License:Creative Commons Attribution 3.0 Unported - CC BY 3.0* http://creativecommons.org/licenses/by/3.0/* This software may be used freely on commercial and non-commercial projects with attribution to the author/copyright holder.* Author:Patrick Kunka* Copyright 2013 Patrick Kunka,All Rights Reserved*/
(function($){
	function EasyDropDown(){
	this.isField = true,this.down = false,this.inFocus = false,this.disabled = false,this.cutOff = false,this.hasLabel = false,this.keyboardMode = false,this.nativeTouch = true,this.wrapperClass = 'dropdown',this.onChange = null;
}
;
	EasyDropDown.prototype ={
	constructor:EasyDropDown,instances:[],init:function(domNode,settings){
	varself = this;
	$.extend(self,settings);
	self.$select = $(domNode);
	self.id = domNode.id;
	self.options = [];
	self.$options = self.$select.find('option');
	self.isTouch = 'ontouchend' in document;
	self.$select.removeClass(self.wrapperClass+' dropdown');
	if(self.$select.is(':disabled')){
	self.disabled = true;
}
;
	if(self.$options.length){
	self.$options.each(function(i){
	var $option = $(this);
	if($option.is(':selected')){
	self.selected ={
	index:i,title:$option.text()}
self.focusIndex = i;
}
;
	if($option.hasClass('label') && i == 0){
	self.hasLabel = true;
	self.label = $option.text();
	$option.attr('value','');
}
else{
	self.options.push({
	domNode:$option[0],title:$option.text(),value:$option.val(),selected:$option.is(':selected')}
);
}
;
}
);
	if(!self.selected){
	self.selected ={
	index:0,title:self.$options.eq(0).text()}
self.focusIndex = 0;
}
;
	self.render();
}
;
}
,render:function(){
	varself = this,touchClass = self.isTouch && self.nativeTouch ? ' touch':'',disabledClass = self.disabled ? ' disabled':'';
	self.$container = self.$select.wrap('<div class="'+self.wrapperClass+touchClass+disabledClass+'"><span class="old"/></div>').parent().parent();
	self.$active = $('<span class="selected">'+self.selected.title+'</span>').appendTo(self.$container);
	self.$carat = $('<span class="carat"/>').appendTo(self.$container);
	self.$scrollWrapper = $('<div><ul/></div>').appendTo(self.$container);
	self.$dropDown = self.$scrollWrapper.find('ul');
	self.$form = self.$container.closest('form');
	$.each(self.options,function(){
	varoption = this,active = option.selected ? ' class="active"':'';
	self.$dropDown.append('<li'+active+'>'+option.title+'</li>');
}
);
	self.$items = self.$dropDown.find('li');
	self.maxHeight = 0;
	if(self.cutOff && self.$items.length > self.cutOff)self.$container.addClass('scrollable');
	for(i = 0;
	i < self.$items.length;
	i++){
	var $item = self.$items.eq(i);
	self.maxHeight += $item.outerHeight();
	if(self.cutOff == i+1){
	break;
}
;
}
;
	if(self.isTouch && self.nativeTouch){
	self.bindTouchHandlers();
}
else{
	self.bindHandlers();
}
;
}
,bindTouchHandlers:function(){
	varself = this;
	self.$container.on('click.easyDropDown',function(){
	self.$select.focus();
}
);
	self.$select.on({
	change:function(){
	var$selected = $(this).find('option:selected'),title = $selected.text(),value = $selected.val();
	self.$active.text(title);
	if(typeof self.onChange === 'function'){
	self.onChange.call(self.$select[0],{
	title:title,value:value}
);
}
;
}
,focus:function(){
	self.$container.addClass('focus');
}
,blur:function(){
	self.$container.removeClass('focus');
}
}
);
}
,bindHandlers:function(){
	varself = this;
	self.query = '';
	self.$container.on({
	'click.easyDropDown':function(){
	if(!self.down && !self.disabled){
	self.open();
}
else{
	self.close();
}
;
}
,'mousemove.easyDropDown':function(){
	if(self.keyboardMode){
	self.keyboardMode = false;
}
;
}
}
);
	$('body').on('click.easyDropDown.'+self.id,function(e){
	var $target = $(e.target),classNames = self.wrapperClass.split(' ').join('.');
	if(!$target.closest('.'+classNames).length && self.down){
	self.close();
}
;
}
);
	self.$items.on({
	'click.easyDropDown':function(){
	var index = $(this).index();
	self.select(index);
	self.$select.focus();
}
,'mouseover.easyDropDown':function(){
	if(!self.keyboardMode){
	var $t = $(this);
	$t.addClass('focus').siblings().removeClass('focus');
	self.focusIndex = $t.index();
}
;
}
,'mouseout.easyDropDown':function(){
	if(!self.keyboardMode){
	$(this).removeClass('focus');
}
;
}
}
);
	self.$select.on({
	'focus.easyDropDown':function(){
	self.$container.addClass('focus');
	self.inFocus = true;
}
,'blur.easyDropDown':function(){
	self.$container.removeClass('focus');
	self.inFocus = false;
}
,'keydown.easyDropDown':function(e){
	if(self.inFocus){
	self.keyboardMode = true;
	var key = e.keyCode;
	if(key == 38 || key == 40 || key == 32){
	e.preventDefault();
	if(key == 38){
	self.focusIndex--self.focusIndex = self.focusIndex < 0 ? self.$items.length - 1:self.focusIndex;
}
else if(key == 40){
	self.focusIndex++self.focusIndex = self.focusIndex > self.$items.length - 1 ? 0:self.focusIndex;
}
;
	if(!self.down){
	self.open();
}
;
	self.$items.removeClass('focus').eq(self.focusIndex).addClass('focus');
	if(self.cutOff){
	self.scrollToView();
}
;
	self.query = '';
}
;
	if(self.down){
	if(key == 9 || key == 27){
	self.close();
}
else if(key == 13){
	e.preventDefault();
	self.select(self.focusIndex);
	self.close();
	return false;
}
else if(key == 8){
	e.preventDefault();
	self.query = self.query.slice(0,-1);
	self.search();
	clearTimeout(self.resetQuery);
	return false;
}
else if(key != 38 && key != 40){
	var letter = String.fromCharCode(key);
	self.query += letter;
	self.search();
	clearTimeout(self.resetQuery);
}
;
}
;
}
;
}
,'keyup.easyDropDown':function(){
	self.resetQuery = setTimeout(function(){
	self.query = '';
}
,1200);
}
}
);
	self.$dropDown.on('scroll.easyDropDown',function(e){
	if(self.$dropDown[0].scrollTop >= self.$dropDown[0].scrollHeight - self.maxHeight){
	self.$container.addClass('bottom');
}
else{
	self.$container.removeClass('bottom');
}
;
}
);
	if(self.$form.length){
	self.$form.on('reset.easyDropDown',function(){
	var active = self.hasLabel ? self.label:self.options[0].title;
	self.$active.text(active);
}
);
}
;
}
,unbindHandlers:function(){
	var self = this;
	self.$container.add(self.$select).add(self.$items).add(self.$form).add(self.$dropDown).off('.easyDropDown');
	$('body').off('.'+self.id);
}
,open:function(){
	var self = this,scrollTop = window.scrollY || document.documentElement.scrollTop,scrollLeft = window.scrollX || document.documentElement.scrollLeft,scrollOffset = self.notInViewport(scrollTop);
	self.closeAll();
	self.$select.focus();
	window.scrollTo(scrollLeft,scrollTop+scrollOffset);
	self.$container.addClass('open');
	self.$scrollWrapper.css('height',self.maxHeight+'px');
	self.down = true;
}
,close:function(){
	var self = this;
	self.$container.removeClass('open');
	self.$scrollWrapper.css('height','0px');
	self.focusIndex = self.selected.index;
	self.query = '';
	self.down = false;
}
,closeAll:function(){
	var self = this,instances = Object.getPrototypeOf(self).instances;
	for(var key in instances){
	var instance = instances[key];
	instance.close();
}
;
}
,select:function(index){
	var self = this;
	if(typeof index === 'string'){
	index = self.$select.find('option[value='+index+']').index() - 1;
}
;
	varoption = self.options[index],selectIndex = self.hasLabel ? index + 1:index;
	self.$items.removeClass('active').eq(index).addClass('active');
	self.$active.text(option.title);
	self.$select.find('option').removeAttr('selected').eq(selectIndex).prop('selected',true).parent().trigger('change');
	self.selected ={
	index:index,title:option.title}
;
	self.focusIndex = i;
	if(typeof self.onChange === 'function'){
	self.onChange.call(self.$select[0],{
	title:option.title,value:option.value}
);
}
;
}
,search:function(){
	var self = this,lock = function(i){
	self.focusIndex = i;
	self.$items.removeClass('focus').eq(self.focusIndex).addClass('focus');
	self.scrollToView();
}
,getTitle = function(i){
	return self.options[i].title.toUpperCase();
}
;
	for(i = 0;
	i < self.options.length;
	i++){
	var title = getTitle(i);
	if(title.indexOf(self.query) == 0){
	lock(i);
	return;
}
;
}
;
	for(i = 0;
	i < self.options.length;
	i++){
	var title = getTitle(i);
	if(title.indexOf(self.query) > -1){
	lock(i);
	break;
}
;
}
;
}
,scrollToView:function(){
	var self = this;
	if(self.focusIndex >= self.cutOff){
	var $focusItem = self.$items.eq(self.focusIndex),scroll = ($focusItem.outerHeight() * (self.focusIndex + 1)) - self.maxHeight;
	self.$dropDown.scrollTop(scroll);
}
;
}
,notInViewport:function(scrollTop){
	var self = this,range ={
	min:scrollTop,max:scrollTop + (window.innerHeight || document.documentElement.clientHeight)}
,menuBottom = self.$dropDown.offset().top + self.maxHeight;
	if(menuBottom >= range.min && menuBottom <= range.max){
	return 0;
}
else{
	return (menuBottom - range.max) + 5;
}
;
}
,destroy:function(){
	var self = this;
	self.unbindHandlers();
	self.$select.unwrap().siblings().remove();
	self.$select.unwrap();
	delete Object.getPrototypeOf(self).instances[self.$select[0].id];
}
,disable:function(){
	var self = this;
	self.disabled = true;
	self.$container.addClass('disabled');
	self.$select.attr('disabled',true);
	if(!self.down)self.close();
}
,enable:function(){
	var self = this;
	self.disabled = false;
	self.$container.removeClass('disabled');
	self.$select.attr('disabled',false);
}
}
;
	var instantiate = function(domNode,settings){
	domNode.id = !domNode.id ? 'EasyDropDown'+rand():domNode.id;
	var instance = new EasyDropDown();
	if(!instance.instances[domNode.id]){
	instance.instances[domNode.id] = instance;
	instance.init(domNode,settings);
}
;
}
,rand = function(){
	return ('00000'+(Math.random()*16777216<<0).toString(16)).substr(-6).toUpperCase();
}
;
	$.fn.easyDropDown = function(){
	var args = arguments,dataReturn = [],eachReturn;
	eachReturn = this.each(function(){
	if(args && typeof args[0] === 'string'){
	var data = EasyDropDown.prototype.instances[this.id][args[0]](args[1],args[2]);
	if(data)dataReturn.push(data);
}
else{
	instantiate(this,args[0]);
}
;
}
);
	if(dataReturn.length){
	return dataReturn.length > 1 ? dataReturn:dataReturn[0];
}
else{
	return eachReturn;
}
;
}
;
	$(function(){
	if(typeof Object.getPrototypeOf !== 'function'){
	if(typeof 'test'.__proto__ === 'object'){
	Object.getPrototypeOf = function(object){
	return object.__proto__;
}
;
}
else{
	Object.getPrototypeOf = function(object){
	return object.constructor.prototype;
}
;
}
;
}
;
	$('select.dropdown').each(function(){
	var json = $(this).attr('data-settings');
	settings = json ? $.parseJSON(json):{
}
;
	instantiate(this,settings);
}
);
}
);
}
)(jQuery);

CSS代码(demo.css):

/* --- RESET --- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
table{border-spacing:0;border-collapse:collapse;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
a{text-decoration:none;}
nav li{list-style-type:none;display:inline-block;}
/* --- DEMO STYLES --- */
body{font-family:'Helvetica Neue',arial,sans-serif;color:#333;-webkit-font-smoothing:antialiased;}
header{padding:15px 0 20px;border-bottom:1px solid #ddd;}
h1,h2,h3{font-weight:700;}
.just{text-align:justify;}
.just:after{content:'';width:100%;display:inline-block;}
.just > *{display:inline-block;vertical-align:bottom;}
.ib{display:inline-block;}
header .wrapper{padding:0 30px;}
header h1{font-size:40px;font-weight:700;margin-bottom:8px;}
header h2{font-weight:400;font-size:20px;}
section{position:relative;font-size:0.1px;text-align:justify;}
section:after{content:'';display:inline-block;width:100%;}
section .wrapper{padding:30px;}
section h3{font-size:20px;margin-bottom:1em;padding-top:.5em;}
section h4{font-size:18px;margin-bottom:1em;font-weight:300;}
.col{display:inline-block;vertical-align:top;text-align:left;}
.col_1{width:55%;}
.col_2{width:45%;max-width:520px;background:#333;color:#ddd;box-shadow:inset 20px 0 20px -20px rgba(0,0,0,.6);}
.col_2 h3,.col_2 strong{color:#fff;}
p,.text li{font-size:16px;font-weight:300;}
p.legal{font-size:14px;margin-bottom:0;}
.col_2 p,.col_2 .text li{font-weight:400;}
.btn{display:inline-block;background:#d24a67;font-weight:700;font-size:16px;color:#fff;padding:10px 12px;margin-bottom:30px;border-radius:5px;-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;}
.btn.ib{margin-right:10px;}
.btn:hover,.btn:focus{background:#fc6767;color:#fff;outline:0 none;box-shadow:inset 0 0 10px rgba(0,0,0,.2);}
p{line-height:1.4;margin-bottom:25px;}
p code,li code{font-size:15px;background:rgba(255,255,255,.7);color:#333;padding:2px;border-radius:1px;}
a{color:#d24a67;}
a:hover{color:#fc6767;}
pre{font-size:15px;color:#c4ae78;margin:15px 0 30px;-webkit-font-smoothing:auto;}
ul.text{margin:0 0 30px 18px;list-style:square;}
.text li{line-height:1.4;margin-bottom:12px;}
select,.dropdown{margin-bottom:30px;display:inline-block;}
.dropdown{margin-right:8px;}
pre.prettyprint{background:#141414;color:#f8f8f8;}
pre.prettyprint span.str,pre.prettyprint span.atv{color:#8f9d6a;}
pre.prettyprint span.kwd,pre.prettyprint span.pun{color:#cda869;}
pre.prettyprint span.com{color:#5f5a60;font-style:italic;}
pre.prettyprint span.typ{color:#9b703f;}
pre.prettyprint span.lit{color:#cf6a4c;}
pre.prettyprint span.pln{color:#7587a6;}
pre.prettyprint span.tag{color:#ac885b;}
pre.prettyprint span.atn{color:#e0c589;}
pre.prettyprint span.dec{color:#494949;}
pre.prettyprint{border:0 none !important;background:transparent !important;}
@media all and (max-width:1040px){.col,.col_2,.col_1{display:block;width:auto;max-width:100%;background:#fff;color:#333;box-shadow:none;}
.col_2 h3,.col_2 strong{color:#333;}
pre.prettyprint{font-size:14px;background:#333 !important;padding:12px !important;border-radius:5px !important;overflow-x:scroll;}
hgroup{text-align:left;margin-bottom:10px;}
}
/* --- DEMO METRO THEME --- */
/* PREFIXED CSS */
.metro,.metro div,.metro li,.metro div::after,.metro .carat,.metro .carat:after,.metro .selected::after,.metro:after{-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;}
.metro .selected::after,.metro.scrollable div::after{-webkit-pointer-events:none;-moz-pointer-events:none;-ms-pointer-events:none;pointer-events:none;}
/* WRAPPER */
.metro{position:relative;width:250px;cursor:pointer;margin-bottom:30px;font-weight:200;background:#f8f8f8;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
.metro.open{z-index:2;}
.metro:hover{background:#f4f4f4;}
.metro:after{content:'';position:absolute;right:3px;bottom:3px;top:2px;width:30px;background:transparent;}
.metro.focus:after{background:#0180d1;}
/* CARAT */
.metro .carat,.metro .carat:after{content:'';position:absolute;right:10px;top:50%;margin-top:-4px;border:8px solid transparent;border-top:8px solid #000;z-index:2;-webkit-transform-origin:50% 20%;-moz-transform-origin:50% 20%;-ms-transform-origin:50% 20%;transform-origin:50% 20%;}
.metro .carat:after{margin-top:-10px;right:-8px;border-top-color:#f8f8f8;}
.metro:hover .carat:after{border-top-color:#f4f4f4;}
.metro.focus .carat{border-top-color:#f8f8f8;}
.metro.focus .carat:after{border-top-color:#0180d1;}
.metro.open .carat{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
/* OLD SELECT (HIDDEN) */
.metro .old{position:absolute;left:0;top:0;height:0;width:0;overflow:hidden;}
.metro select{position:absolute;left:0px;top:0px;}
.metro.touch select{left:0;top:0;width:100%;height:100%;opacity:0;}
/* SELECTED FEEDBACK ITEM */
.metro .selected,.metro li{display:block;font-size:18px;line-height:1;color:#000;padding:9px 12px;overflow:hidden;white-space:nowrap;}
.metro .selected::after{content:'';position:absolute;right:0;top:0;bottom:0;width:60px;border-radius:0 2px 2px 0;box-shadow:inset -55px 0 25px -20px #f8f8f8;}
.metro:hover .selected::after{box-shadow:inset -55px 0 25px -20px #f4f4f4;}
/* DROP DOWN WRAPPER */
.metro div{position:absolute;height:0;left:0;right:0;top:100%;margin-top:-1px;background:#f8f8f8;overflow:hidden;opacity:0;}
.metro:hover div{background:#f4f4f4;}
/* Height is adjusted by JS on open */
.metro.open div{opacity:1;z-index:2;}
/* FADE OVERLAY FOR SCROLLING LISTS */
.metro.scrollable div::after{content:'';position:absolute;left:0;right:0;bottom:0;height:50px;box-shadow:inset 0 -50px 30px -35px #f8f8f8;}
.metro.scrollable:hover div::after{box-shadow:inset 0 -50px 30px -35px #f4f4f4;}
.metro.scrollable.bottom div::after{opacity:0;}
/* DROP DOWN LIST */
.metro ul{position:absolute;left:0;top:0;height:100%;width:100%;list-style:none;overflow:hidden;}
.metro.scrollable.open ul{overflow-y:auto;}
/* DROP DOWN LIST ITEMS */
.metro li{list-style:none;padding:8px 12px;}
/* .focus class is also added on hover */
.metro li.focus{background:#0180d1;position:relative;z-index:3;color:#fff;}
.metro li.active{background:#0180d1;color:#fff;}
/* --- DEMO FLAT THEME --- */
/* PREFIXED CSS */
.flat,.flat div,.flat li,.flat div::after,.flat .carat,.flat .carat:after,.flat .selected::after,.flat:after{-webkit-transition:all 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;}
.flat .selected::after,.flat.scrollable div::after{-webkit-pointer-events:none;-moz-pointer-events:none;-ms-pointer-events:none;pointer-events:none;}
/* WRAPPER */
.flat{position:relative;width:250px;cursor:pointer;font-weight:200;background:#29AF84;padding:8px 0px 8px;border-radius:5px;color:#000;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
.flat.open{z-index:2;}
.flat:hover,.flat.focus{background:#00C384;}
/* CARAT */
.flat .carat,.flat .carat:after{position:absolute;right:14px;top:50%;margin-top:-3px;border:6px solid transparent;border-top:6px solid #FFF;z-index:1;-webkit-transform-origin:50% 20%;-moz-transform-origin:50% 20%;-ms-transform-origin:50% 20%;transform-origin:50% 20%;}
.flat:hover .carat:after{border-top-color:#f4f4f4;}
.flat.focus .carat{border-top-color:#f8f8f8;}
.flat.focus .carat:after{border-top-color:#0180d1;}
.flat.open .carat{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
/* OLD SELECT (HIDDEN) */
.flat .old{position:absolute;left:0;top:0;height:0;width:0;overflow:hidden;}
.flat select{position:absolute;left:0px;top:0px;}
.flat.touch select{left:0;top:0;width:100%;height:100%;opacity:0;}
/* SELECTED FEEDBACK ITEM */
.flat .selected{color:#FFF;}
.flat .selected,.flat li{display:block;font-size:16px;font-weight:400;text-transform:uppercase;line-height:1;padding:8px 12px;overflow:hidden;white-space:nowrap;}
.flat .selected::after{content:'';position:absolute;right:0;top:0;bottom:0;width:60px;border-radius:0 5px 5px 0;box-shadow:inset -55px 0 25px -20px #29af84;}
.flat:hover .selected::after,.flat.focus .selected::after{box-shadow:inset -55px 0 25px -20px #00c384;}
/* DROP DOWN WRAPPER */
.flat div{position:absolute;height:0;left:0;right:0;top:100%;margin-top:1px;background:#00C384;overflow:hidden;opacity:0;color:#04724E;border-radius:5px;}
.flat:hover div{background:#00C384;border-radius:5px;}
/* Height is adjusted by JS on open */
.flat.open div{opacity:1;z-index:2;}
/* FADE OVERLAY FOR SCROLLING LISTS */
.flat.scrollable div::after{content:'';position:absolute;left:0;right:0;bottom:0;height:50px;box-shadow:inset 0 -50px 30px -35px #00c384;}
.flat.scrollable:hover div::after{box-shadow:inset 0 -50px 30px -35px #00c384;}
.flat.scrollable.bottom div::after{opacity:0;}
/* DROP DOWN LIST */
.flat ul{position:absolute;left:0;top:0;height:100%;width:100%;list-style:none;overflow:hidden;border-radius:5px;}
.flat.scrollable.open ul{overflow-y:auto;}
/* DROP DOWN LIST ITEMS */
.flat li{list-style:none;padding:14px 12px;border-bottom:1px solid #29AF84;}
.flat li:last-child{border-bottom:0;}
/* .focus class is also added on hover */
.flat li.focus{background:#00C384;position:relative;z-index:3;color:#fff;}
.flat li.active{background:#29AF84;color:#fff;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
45.66 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
45.66 KB
立即下载
卫兰黛
了解
打赏作者 鼓励作者
jquery特效7
最新结算
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
打赏文章