以下是 jQuery弹性大幅下拉导航特效代码 的示例演示效果:
部分效果截图:
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" />
<title>jQuery弹性大幅下拉导航</title>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
</head>
<body>
<!--主导航代码开始-->
<div id="menu_bg">
<div class="imenu_bg">
<div class="imenu" topnav="nav5" attr="gyyz"><a href="http://www.baidu.com/">关于叶子</a>
<div class="submnu">
<div id="gyyz">
<ul class="li_content">
<li><a href="http://www.baidu.com/" target="_blank">品牌理念</a></li>
<li><a href="http://www.baidu.com/" target="_blank">典雅环境</a></li>
<li><a href="http://www.baidu.com/" target="_blank">专家团队</a></li>
<li><a href="http://www.baidu.com" target="_blank">安全保障体系</a></li>
<li><a href="http://www.baidu.com" target="_blank">容貌设计中心</a></li>
</ul>
<ul class="li_content">
<li><a href="http://www.baidu.com/" target="_blank">尖端设备</a></li>
<li><a href="http://www.baidu.com/" target="_blank">叶子视频</a></li>
<li><a href="http://www.baidu.com/" target="_blank">联系我们</a></li>
<li><a href="http://www.baidu.com/" target="_blank">加入我们</a></li>
</ul>
<div class="pic001">
<a href="http://www.baidu.com/" target="_blank"><img src="images/img.jpg" alt="医院典雅环境" /></a>
<a href="http://www.baidu.com/" target="_blank"><img src="images/img2.jpg" alt="权威专家团队" /></a>
<a href="http://www.baidu.com/" target="_blank"><img src="images/img3.jpg" alt="国际顶级设备" /></a>
</div>
</div>
</div>
</div>
<div class="imenu" topnav="navzx" attr="zx"><a href="#">整形中心</a>
<div class="submnu">
<div id="zx">
<div class="s-zx">
<ul class="li_content">
<li class="zxdl">眼部整形</li>
<li><a href="http://www.baidu.com" target="_blank">重脸术</a></li>
<li><a href="http://www.baidu.com/" target="_blank">祛眼袋</a></li>
<li><a href="http://www.baidu.com" target="_blank">开眼角</a></li>
<li><a href="http://www.baidu.com" target="_blank">眼尾提升</a></li>
<li><a href="http://www.baidu.com" target="_blank">眼睑下垂矫正</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">鼻部整形</li>
<li><a href="http://www.baidu.com" target="_blank">假体隆鼻</a></li>
<li><a href="http://www.baidu.com" target="_blank">鼻尖整形</a></li>
<li><a href="http://www.baidu.com" target="_blank">鼻翼整形</a></li>
<li class="zxdl">眉部整形</li>
<li><a href="http://www.baidu.com" target="_blank">眉弓垫高</a></li>
<li><a href="http://www.baidu.com" target="_blank">三合一美眉</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">唇部整形</li>
<li><a href="http://www.baidu.com" target="_blank">丰唇术</a></li>
<li><a href="http://www.baidu.com" target="_blank">厚唇改薄</a></li>
<li><a href="http://www.baidu.com" target="_blank">人中成形术</a></li>
<li><a href="http://www.baidu.com" target="_blank">唇珠成形术</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">面部轮廓</li>
<li><a href="http://www.baidu.com" target="_blank">下颌角整形</a></li>
<li><a href="http://www.baidu.com" target="_blank">下颏整形</a></li>
<li><a href="http://www.baidu.com" target="_blank">额头整形</a></li>
<li><a href="http://www.baidu.com" target="_blank">颞部填充</a></li>
<li><a href="http://www.baidu.com" target="_blank">颊脂垫祛除</a></li>
<li><a href="http://www.baidu.com" target="_blank">颧弓颧骨整形</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">乳房整形</li>
<li><a href="http://www.baidu.com" target="_blank">假体隆胸</a></li>
<li><a href="http://www.baidu.com" target="_blank">自体脂肪隆胸</a></li>
<li><a href="http://www.baidu.com" target="_blank">副乳切除术</a></li>
<li><a href="http://www.baidu.com" target="_blank">乳房上提术</a></li>
<li><a href="http://www.baidu.com" target="_blank">巨乳缩小术</a></li>
<li><a href="http://www.baidu.com" target="_blank">乳头乳晕矫正</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">吸脂整形</li>
<li><a href="http://www.baidu.com" target="_blank">面部吸脂</a></li>
<li><a href="http://www.baidu.com" target="_blank">腿部吸脂</a></li>
<li><a href="http://www.baidu.com" target="_blank">臀部吸脂</a></li>
<li><a href="http://www.baidu.com" target="_blank">手臂吸脂</a></li>
<li><a href="http://www.baidu.com" target="_blank">腰腹吸脂</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">除皱整形</li>
<li><a href="http://www.baidu.com" target="_blank">SMAS除皱</a></li>
<li><a href="http://www.baidu.com" target="_blank">面部提升术</a></li>
<li><a href="http://www.baidu.com/" target="_blank">注射除皱</a></li>
<li><a href="http://www.baidu.com/" target="_blank">激光除皱</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">耳部整形</li>
<li><a href="http://www.baidu.com" target="_blank">副耳切除术</a></li>
<li><a href="http://www.baidu.com" target="_blank">招风耳修复</a></li>
<li class="zxdl">私密整形</li>
<li><a href="http://www.baidu.com" target="_blank">女性私密整形</a></li>
<li><a href="http://www.baidu.com" target="_blank">男性私密整形</a></li>
<li class="zxdl"><a href="http://www.baidu.com/" target="_blank">毛发种植</a></li>
</ul>
</div>
<div class="piczx">
<a href="http://www.baidu.com" target="_blank"><img src="images/nav-img1.jpg" alt="叶子晴彩眼部整形" /></a>
<a href="http://www.baidu.com" target="_blank"><img src="images/nav-img3.jpg" alt="叶子鼻部整体雕塑" /></a>
<a href="http://www.baidu.com" target="_blank"><img src="images/nav-img4.jpg" alt="" /></a>
<a href="http://www.baidu.com" target="_blank"><img src="images/nav-img5.jpg" alt="叶子精致脸型雕塑" /></a>
<a href="http://www.baidu.com/" target="_blank"><img src="images/nav-img6.jpg" alt="叶子数字化隐形丰胸" /></a>
<a href="http://www.baidu.com/" target="_blank"><img src="images/nav-img7.jpg" alt="叶子360°聚能吸脂" /></a>
<a href="http://www.baidu.com" target="_blank"><img src="images/nav-img8.jpg" alt="" /></a>
<a href="http://www.baidu.com" target="_blank"><img src="images/nav-img9.jpg" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="imenu" topnav="navpf" attr="pf"><a href="#">皮肤中心</a>
<div class="submnu">
<div id="pf">
<div class="s-pf">
<ul class="li_content">
<li class="zxdl">美白祛斑</li>
<li><a href="http://www.baidu.com" target="_blank">飞顿2号三维彩光</a></li>
<li><a href="http://www.baidu.com/" target="_blank">科医人复合彩光</a></li>
<li><a href="http://www.baidu.com/" target="_blank">Q开关色素激光</a></li>
<li><a href="http://www.baidu.com/" target="_blank">飞顿像束激光</a></li>
<li><a href="http://www.baidu.com/" target="_blank">翠绿宝石祛斑王</a></li>
<li><a href="http://www.baidu.com/" target="_blank">MedLite C6</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">除皱紧肤</li>
<li><a href="http://www.baidu.com/" target="_blank">飞顿RF射频除皱</a></li>
<li><a href="http://www.baidu.com/" target="_blank">飞顿像束激光</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">无痛脱毛</li>
<li><a href="http://www.baidu.com/" target="_blank">飞顿SHR冰点脱毛</a></li>
<li><a href="http://www.baidu.com/" target="_blank">科医人复合彩光脱毛</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">痤疮疤痕</li>
<li><a href="http://www.baidu.com/" target="_blank">飞顿2号三维彩光</a></li>
<li><a href="http://www.baidu.com/" target="_blank">飞顿像束激光</a></li>
<li><a href="http://www.baidu.com/" target="_blank">科医人复合彩光</a></li>
<li><a href="http://www.baidu.com/" target="_blank">MedLite C6</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">其他美容</li>
<li><a href="http://www.baidu.com/" target="_blank">祛除红血丝</a></li>
<li><a href="http://www.baidu.com/" target="_blank">祛 痣</a></li>
<li><a href="http://www.baidu.com/" target="_blank">艺术纹绣</a></li>
<li><a href="http://www.baidu.com/" target="_blank">洗纹身</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">护肤产品</li>
<li><a href="http://www.baidu.com/" target="_blank">瑞士瑞研Cellcosmet</a></li>
<li><a href="http://www.baidu.com/" target="_blank">意大利A'Pure</a></li>
<li><a href="http://www.baidu.com/" target="_blank">法国雅诗敦Institut</a></li>
</ul>
</div>
<div class="piczx">
<a href="http://www.baidu.com/" target="_blank"><img src="images/nav-img21.jpg" alt="" /></a>
<a href="http://www.baidu.com/" target="_blank"><img src="images/nav-img22.jpg" alt="" /></a>
<a href="http://www.baidu.com/" target="_blank"><img src="images/nav-img23.jpg" alt="" /></a>
</div>
</div>
</div>
</div>
<div class="imenu" topnav="navwc" attr="wc"><a href="#">微创中心</a>
<div class="submnu">
<div id="wc">
<ul class="li_content">
<li class="zxdl">微创除皱</li>
<li><a href="http://www.baidu.com/" target="_blank">爱贝芙除皱</a></li>
<li><a href="http://www.baidu.com/" target="_blank">胶原蛋白除皱</a></li>
<li><a href="http://www.baidu.com/" target="_blank">玻尿酸除皱</a></li>
<li><a href="http://www.baidu.com/" target="_blank">BOTOX除皱</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">微创塑形</li>
<li><a href="http://www.baidu.com//" target="_blank">爱贝芙塑形</a></li>
<li><a href="http://www.baidu.com/" target="_blank">胶原蛋白塑形</a></li>
<li><a href="http://www.baidu.com/" target="_blank">玻尿酸塑形</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">微创瘦脸</li>
<li><a href="http://www.baidu.com/" target="_blank">BOTOX瘦脸</a></li>
</ul>
<div class="pic001">
<a href="http://www.baidu.com/" target="_blank"><img src="images/nav-img31.jpg" alt="爱贝芙注射美容" /></a>
<a href="http://www.baidu.com/" target="_blank"><img src="images/nav-img32.jpg" alt="BOTOX注射除皱美容" /></a>
<a href="http://www.baidu.com/" target="_blank"><img src="images/nav-img33.jpg" alt="玻尿酸注射美容" /></a>
</div>
</div>
</div>
</div>
<div class="imenu" topnav="navmc" attr="mc"><a href="#">美齿中心</a>
<div class="submnu">
<div id="mc">
<ul class="li_content">
<li class="zxdl">全能仿生美容冠</li>
<li><a href="http://www.baidu.com" target="_blank">金属美容冠</a></li>
<li><a href="http://www.baidu.com" target="_blank">全瓷美容冠</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">牙齿正畸</li>
<li><a href="http://www.baidu.com/" target="_blank">无托槽隐形矫正</a></li>
</ul>
<ul class="li_content ul2">
<li class="zxdl">牙齿美白</li>
<li><a href="http://www.baidu.com/" target="_blank">第二代Beyond冷光美白</a></li>
<li><a href="http://www.baidu.com/" target="_blank">超声波清洁</a></li>
<li><a href="http://www.baidu.com/" target="_blank">喷砂清洁</a></li>
</ul>
<ul class="li_content">
<li class="zxdl">牙齿综合治疗</li>
<li><a href="http://www.baidu.com/" target="_blank">活动义齿修复</a></li>
<li><a href="http://www.baidu.com/" target="_blank">根管治疗</a></li>
<li><a href="http://www.baidu.com/" target="_blank">牙齿填充</a></li>
<li><a href="http://www.baidu.com/" target="_blank">无痛拔牙</a></li>
</ul>
<div class="pic001">
<a href="http://www.baidu.com" target="_blank"><img src="images/nav-img41.jpg" alt="美容冠7天快速矫正成人畸形牙" /></a>
<a href="http://www.baidu.com/" target="_blank"><img src="images/nav-img43.jpg" alt="Beyond冷光美白牙齿美白只需30分钟" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(slide.js):
$(function(){
//导航菜单 $('div[topnav]').hover(function(){
var it = $(this).attr('attr');
if(it === 'undefined') return false;
var heht = $(this).find('#' + it).height() + 20 + "px";
$(this).find('.submnu').height(heht);
//代码整理：www.97zzw.com - 97站长网 $(this).stop().find('.submnu').animate({
height:'show'}
,{
queue:false,duration:500,easing:'easeOutBounce'}
);
$(this).stop().attr('class','imenu_on').siblings().attr('class','imenu');
}
,function(){
$(this).stop().find('.submnu').hide();
$(this).stop().attr('class','imenu');
}
);
}
);
JS代码(tools.js):
/** * * * */
if(typeof console === 'undefined'){
console ={
log:function(){
}
}
;
}
;
(function(){
Function.prototype.method = function(name,func){
if(!this.prototype[name]){
this.prototype[name] = func;
}
}
;
if( !window.XMLHttpRequest && window.ActiveXObject){
try{
document.execCommand('BackgroundImageCache',false,true);
}
catch (e){
}
;
}
/* * String */
var str ={
rgbtoHex:function(){
var s = this.match(/\d{
1,3}
/g);
if(!s) return null;
if(s.length == 4 && s[3]==0) return 'transparent';
var result = [];
for(var i=0,l=s.length;
i<l;
i++){
s[i] = (s[i]-0).toString(16);
result.push(s[i].length==1 ? '0'+s[i]:s[i]);
}
return '#'+result.join('');
}
,camelCase:function(){
return this.replace(/-\D/g,function(m){
return m.charAt(1).toUpperCase()}
)}
,hyphenate:function(){
return this.replace(/[A-Z]/g,function(m){
return '-'+m.charAt(0).toLowerCase()}
)}
}
;
for(var key in str){
if(str.hasOwnProperty(key)){
String.method(key,str[key]);
}
}
/* * Array */
}
)();
/* * Element */
var Element ={
create:function(){
}
,hasClass:function(obj,name){
return (' '+obj.className+' ').indexOf(' '+name+' ') > -1 ? true:false;
}
,addClass:function(obj,name){
if(this.hasClass(obj,name)) return;
obj.className += ' ' + name;
}
,removeClass:function(obj,name){
obj.className = obj.className.replace(new RegExp('(^|\\s)' +name+ '(?:\\s|$)'),'$1').replace(/\s{
1,}
/g,' ');
}
,getStyle:function(obj,style){
var result;
if(style == 'padding' || style=='margin'){
result = '';
for(var key in{
top:0,right:0,bottom:0,left:0}
){
result += Element.getStyle(obj,style+'-'+key) + ' ';
}
result = result.replace(/\s$/,'');
return result;
}
function getComStyle(property){
if(obj.currentStyle) return obj.currentStyle[property.camelCase()];
var computed = window.getComputedStyle(obj,null);
return (computed) ? computed.getPropertyValue(property.hyphenate()):null;
}
if(style == 'opacity'){
if(window.ActiveXObject){
result = getComStyle('filter').replace(/[^0-9\.]/g,'');
result = result== '' ? 1:parseInt(result*100)/10000;
return result;
}
result = parseFloat(getComStyle(style));
result = !result && result != 0 ? 1:result;
return result;
}
style = style.camelCase();
result = obj.style[style];
if(!result&&result!==0){
result = getComStyle(style);
}
if(result){
//if(/rgb/.test(style)){
//resutl = result.rgbtoHex();
//}
if(/^(width)|(height)$/.test(style)){
var path = style == 'width' ? ['left','right']:['top','bottom'],size =0;
size = (parseInt(this.getStyle(obj,'padding-'+path[0])) || 0) + (parseInt(this.getStyle(obj,'padding-'+path[1])) || 0) + (parseInt(this.getStyle(obj,'border-'+path[0]+'-width')) || 0 ) + (parseInt(this.getStyle(obj,'border-'+path[1]+'-width')) || 0);
result = obj['offset'+style.replace(/\b[a-z]/,function(m){
return m.toUpperCase();
}
)]-size;
return result;
}
if(result == 'auto' && style == 'zIndex'){
result = 0;
return result;
}
}
return result;
}
,setStyle:function(obj,values){
var str = ';
';
for(var key in values){
if(values.hasOwnProperty(key)){
if(key == 'opacity'){
str += key + ':' + values[key] + ';
filter:alpha(opacity='+ values[key]*100 +');
';
continue;
}
if(/(rgb)|(#)/i.test(values[key]) || !parseInt(values[key]) || /(scroll)|(index)/i.test(key)){
str += key +':'+ values[key] + ';
';
continue;
}
str += key +':'+ Math.round(values[key]) + 'px;
';
}
}
obj.style.cssText += str;
str = null;
return;
}
,getPosition:function(obj){
var o = typeof obj === 'string' ? document.getElementById(obj):obj,x=0,y=0;
while(o){
x+=o.offsetLeft;
y+=o.offsetTop;
o = o.offsetParent;
}
return{
x:x,y:y}
}
,getChild:function(obj,node){
var o = typeof obj === 'string' ? document.getElementById(obj):obj,list = o.childNodes,nodes = [];
for(var i=0,l=list.length;
i<l;
i++){
if(node){
if(list[i].nodeName == node.toUpperCase()){
nodes.push(list[i]);
}
}
else{
if(list[i].nodeType == 1) nodes.push(list[i])}
}
o=null;
list=null;
return nodes;
}
}
/* * Event */
var Event ={
add:(function(){
if(document.addEventListener){
return function(obj,type,fn){
obj.addEventListener(type,fn,false)}
}
return function(obj,type,fn){
obj.attachEvent('on'+type,fn)}
}
)(),remove:(function(){
if(document.removeEventListener){
return function(obj,type,fn){
obj.removeEventListener(type,fn,false)}
}
return function(obj,type,fn){
obj.detachEvent('on'+type,fn)}
}
)(),stop:function(e){
if(e&&e.stopPropagation){
e.stopPropagation();
e.preventDefault();
}
else{
window.event.cancelBubble = true;
window.event.returnValue = false;
}
}
}
/* * Anima */
function Anima(id,options){
var opts,obj,step,timer,transition,begin,current,end,style ={
name:[],from:[],to:[]}
,complete;
function init(opt){
opts = opt ||{
}
;
obj = typeof id === 'string' ? document.getElementById(id):id;
step = parseInt((opts.time || 500));
timer = null;
transition = opts.trans || '1';
begin = 0;
current = 0;
end = 0;
style ={
name:[],from:[],to:[]}
;
}
init(options);
function start(opt){
stop();
style ={
name:[],from:[],to:[]}
;
for(var key in opt){
style.name.push(key.hyphenate());
if(typeof opt[key] === 'object'){
style.from.push(parseFloat(opt[key][0]));
style.to.push(parseFloat(opt[key][1]));
continue;
}
var result = Element.getStyle(obj,key);
result = typeof result === 'undefind' ? opt[key]:result;
style.from.push(result);
style.to.push(opt[key]);
result = null;
}
begin = getTime();
current = getTime();
end = begin + step;
play();
}
function play(){
var m = 0;
function move(){
current = getTime();
m = (current - begin)/step;
if(m>=1){
m=1;
}
var str ={
}
,n='';
for(var i=0,l=style.name.length;
i<l;
i++){
if(/(rgb)|(#)/i.test(style.from[i])){
var froms = setColor(style.from[i]),tos = setColor(style.to[i]),results = [];
for(var j=0,k=froms.length;
j<k;
j++){
results.push( Math.round(trans((froms[j]-0),(tos[j]-0),m)))}
n = results.join(',').rgbtoHex();
}
else{
n = parseFloat(trans( parseFloat(style.from[i]),parseFloat(style.to[i]),m));
}
str[style.name[i]] = n;
}
Element.setStyle(obj,str);
if(m==1){
stop();
onComplete();
return;
}
}
timer = setInterval(move,15);
function trans(f,t,a){
return f + (t-f)*transFunc(a);
}
function setColor(value){
var result;
if(value.indexOf('#')>-1){
value = value.replace(/#/,'');
if(value.length==3){
value = value.replace(/(\w)(\w)(\w)/,'$1$1$2$2$3$3');
}
result = value.replace(/\w{
2}
/g,function(m){
return parseInt(m.replace(/^0{
1}
/g,''),16)+','}
).replace(/\,$/g,'').split(',');
return result;
}
if(value.indexOf('rgb')>-1){
result = value.match(/\d{
1,3}
/g);
}
return result;
}
}
function trans(s){
switch(s){
case '0':transFunc = function(m){
return m}
;
break;
case '2':transFunc = function(m){
return Math.pow(m,2) * (2.618 * m - 1.618)}
;
break;
case '3':transFunc = function(m){
return (m<=0.5) ? Math.pow(m,2) * (2.618 * m - 1.618):(1 - Math.pow((1-m),2)*(2.618 * (1-m) - 1.618));
}
break;
case '1':default:transFunc = function (m){
return (1-Math.cos(Math.PI*m))/2}
;
}
}
trans(transition);
function pause(){
stop();
}
function reStart(){
var fix = current - begin;
current = getTime();
begin = current - fix;
end = begin + step;
play();
}
function stop(){
if(timer){
clearInterval(timer);
timer = null;
}
}
function getTime(){
return (new Date()).getTime();
}
function cancel(fn){
stop();
fn && fn();
}
function onComplete(){
if(complete){
complete();
complete = null;
}
}
function setComplete(fn){
if(fn) complete = fn;
}
return{
start:start,cancel:cancel,stop:stop,pause:pause,reStart:reStart,complete:setComplete}
}
;
/* * async loader * dom ready **/
(function(){
var loaded ={
}
,loadingFiles ={
}
,loadList ={
}
,mods ={
}
,isReady = false,readyList = [],f = document.getElementsByTagName('script')[0],y;
function load(url,charset,callback){
if(loaded[url]){
loadingFiles[url] = false;
callback && callback(url);
return;
}
if(loadingFiles[url]){
setTimeout(function(){
load(url,charset,callback);
}
,10);
return;
}
loadingFiles[url] = true;
var n,done = function(){
loaded[url] = 1;
callback && callback(url);
callback = null;
}
,t;
t = url.toLowerCase().indexOf('.css') > -1 ? 'css':'js';
if(t === 'css'){
n = document.createElement('link');
n.setAttribute('rel','stylesheet');
n.setAttribute('type','text/css');
n.setAttribute('href',url);
var img = new Image();
img.onerror = function(){
try{
done();
}
catch(e){
}
img.onerror = null;
img = null;
}
img.src = url;
}
else{
n = document.createElement('script');
n.setAttribute('type','text/javascript');
n.src = url;
n.async = true;
n.onerror = function(){
console.log(url+' is load fail;
');
try{
done();
}
catch(e){
}
n.onerror = null;
}
}
if(charset){
n.charset = charset;
}
n.readyState ? n.onreadystatechange = function(){
if( /loaded|complete/.test(n.readyState)){
done();
n.onreadystatechange = null;
}
}
:n.onload = function(){
done();
n.onload = null;
}
f.parentNode.insertBefore(n,f);
}
function loadDeps(deps,callback){
var mod,len = deps.length,id = deps.join('');
if(loadList[id]){
callback && callback();
return;
}
function complete(){
if(!--len){
loadList[id] = 1;
callback && callback();
}
}
for(var i=0,l=deps.length;
i<l;
i++){
if(typeof deps[i] === 'string' ){
mod = (mods[deps[i]]) ? mods[deps[i]]:{
path:deps[i]}
;
}
else{
mod = deps[i];
}
if(mod.requires){
loadDeps(mod.requires,(function(mod,key){
return function(){
load(mod.path,mod.charset,function(){
if(mod.callback){
mod.callback();
mods[key].callback = null;
}
complete();
}
);
}
}
)(mod,deps[i]))}
else{
load(mod.path,mod.charset,(function(mod,key){
return function(){
if(mod.callback){
mod.callback();
mods[key].callback = null;
}
complete();
}
}
)(mod,deps[i]));
}
}
}
var loader = function(){
var args = [].slice.call(arguments),fn,id;
if(typeof args[args.length-1] === 'function'){
fn = args.pop();
}
if( args.length === 0 ){
fn && fn();
return;
}
id = args.join('');
if(loadList[id]){
fn && fn();
return;
}
loadDeps(args,function(){
fn && fn();
}
)}
loader.add = function(name,value){
if(!name || !value){
return;
}
var _mod = [];
if(name === 'mods'){
for(var key in value){
if(value.hasOwnProperty(key) && value[key].path){
mods[key] = value[key];
_mod.push(key);
}
}
}
else if( value.path ){
mods[name] = value;
_mod.push(name);
}
loadDeps(_mod);
_mod = null;
}
window['Y'] = loader;
/*! * contentloaded.js * Author:Diego Perini (diego.perini at gmail.com) */
function contentLoaded(fn){
var done = false,top = true,win = window,doc = win.document,root = doc.documentElement,add = doc.addEventListener ? 'addEventListener':'attachEvent',rem = doc.addEventListener ? 'removeEventListener':'detachEvent',pre = doc.addEventListener ? '':'on',init = function(e){
if (e.type == 'readystatechange' && doc.readyState != 'complete') return;
(e.type == 'load' ? win:doc)[rem](pre + e.type,init,false);
if (!done && (done = true)) fn.call(win,e.type || e);
}
,poll = function(){
try{
root.doScroll('left');
}
catch(e){
setTimeout(poll,50);
return;
}
init('poll');
}
;
if (doc.readyState == 'complete') fn.call(win,'lazy');
else{
if (doc.createEventObject && root.doScroll){
try{
top = !win.frameElement;
}
catch(e){
}
if (top) poll();
}
doc[add](pre + 'DOMContentLoaded',init,false);
doc[add](pre + 'readystatechange',init,false);
win[add](pre + 'load',init,false);
}
}
contentLoaded(function(){
isReady = true;
fireReadyList();
}
);
function fireReadyList(){
var i=0,len=readyList.length;
if(len){
for(;
readyList[i];
i++){
readyList[i]();
}
}
}
window['Domready'] = function(fn){
if(isReady){
fn && fn();
return;
}
readyList.push(fn);
}
}
)()JS代码(ykms.js):
/* * */
(function(){
function $(id,tag){
var re=(id&&typeof id!="string") ? id:document.getElementById(id);
if(!tag){
return re;
}
else{
return re.getElementsByTagName(tag);
}
}
function upper(m){
return m.replace(/^[a-z]/g,function(n){
return n.charAt(0).toUpperCase()}
);
}
function tagSwitch(tit,box,s,fn,time,show){
tit=tit.split('/');
box=box.split("/");
!s&&(s="mouseover");
!show&&(show=0);
var ts=$(tit[0]),bs=$(box[0]),n=0,tx=tit[2],bx=box[2],now=-1,i,c,old=-1;
ts = Element.getChild(ts,tit[1]);
bs = Element.getChild(bs,box[1]);
n=ts.length;
for(i=0;
i<n;
i++){
reg(ts[i],bs[i],i);
}
;
function reg(tv,bv,i){
var timer = null;
Element.removeClass(tv,'on');
Element.removeClass(bv,'on');
tv.old = tv.className || '';
bv.old = bv.className || '';
Event.add(tv,s,function(){
if(timer) return;
timer = setTimeout(function(){
timer = null;
clearInterval(c);
init(i);
}
,50);
}
);
Event.add(tv,'mouseout',function(){
if(timer){
clearTimeout(timer);
timer = null;
}
}
)if(show!=-1&&time){
Event.add(bv,"mouseover",function(){
clearInterval(c);
}
);
Event.add(bv,"mouseout",go);
Event.add(tv,"mouseout",function(){
if(timer){
clearTimeout(timer);
timer = null;
}
go();
}
);
}
else if(show==-1&&s=="mouseover"){
Event.add(tv,"mouseout",function(){
init(0);
}
);
}
}
init(0);
if(show!=-1&&time){
c=setInterval(auto,time);
}
function go(){
clearInterval(c);
c=setInterval(auto,time);
}
function init(m){
if(m==now) return;
if(old>-1){
Element.removeClass(ts[old],'old');
Element.removeClass(bs[old],'old');
}
if(now>-1){
Element.addClass(ts[now],'old');
Element.addClass(bs[now],'old');
Element.removeClass(ts[now],'on');
Element.removeClass(bs[now],'on');
old = now;
}
if(m>-1){
Element.addClass(ts[m],'on');
Element.addClass(bs[m],'on');
now = m;
}
fn&&fn(ts[m],bs[m],m);
}
function auto(){
var s = now;
(s<n-1)?s++:s=0;
init(s);
}
;
}
function inputFocus(id,defaultValue){
var obj = $(id),v = defaultValue;
Event.add(obj,'focus',function(){
if(obj.value == v){
obj.value = '';
Element.addClass(obj,'on');
}
}
)Event.add(obj,'blur',function(){
if(obj.value == '' || obj.value == v){
obj.value = v;
Element.removeClass(obj,'on');
}
}
)}
function loadScript(url,callback,charset){
var script = document.createElement('script');
script.setAttribute('async',true);
script.src = url;
if(charset) script.charset = charset;
script.readyState ? script.onreadystatechange = function(){
if(script.readyState == 'loaded' || script.readyState =='complete'){
setTimeout(function(){
if(callback) callback();
}
,100)}
}
:script.onload = function(){
if(callback) callback();
}
document.getElementsByTagName('head')[0].appendChild(script);
}
function lazyLoad(id,tarid,type){
if(!id || !tarid) return;
var obj = document.getElementById(id),tar = document.getElementById(tarid),n = 0,inner = '',div = document.createElement('div');
if(!obj || !tar) return;
if(type){
obj.appendChild(tar);
return;
}
/*n = tar.innerHTML.toLowerCase().indexOf('</script>') + 9;
*/
inner = tar.innerHTML.replace(/\<script[^\>]{
1,}
(yokaafp7\.allyes\.com|yoka\.adsame\.com)[^\>]{
1,}
\>\<\/script\>/g,'');
inner = inner.replace(/\<div\s{
1,}
adCount.*\<\/div\>/,'');
div.innerHTML = inner;
obj.appendChild(div);
tar.innerHTML = '';
inner = null;
}
function menu(tit,con){
tit=tit.split('/');
con=con.split('/');
var ts = $(tit[0],tit[1]),cs = $(con[0],con[1]),box = $(con[0]),str = [];
for(var i=0;
i<ts.length;
i++){
str.push(ts[i].parentNode.parentNode);
}
;
for(var i=0;
i<ts.length;
i++){
obj(i);
}
;
function obj(n){
Event.add(str[n],"mouseover",function(){
show(n);
}
);
Event.add(cs[n],"mouseover",function(){
show(n);
}
);
Event.add(str[n],"mouseout",function(){
hidden(n);
}
);
Event.add(cs[n],"mouseout",function(){
hidden(n);
}
);
}
;
function show(n){
var p = Element.getPosition(str[n]);
box.style.cssText = "display:block;
top:" + (p.y+str[n].offsetHeight) +"px;
left:" + (p.x-30) +"px";
cs[n].style.display ="block";
}
;
function hidden(n){
box.style.cssText = "";
cs[n].style.display ="";
}
;
}
function autoWidthMove(data){
var obj = $(data.id),ctrl = $(data.ctrl),left = $(data.left),right = $(data.right),staus = false,span,cun,cur = 0,to,fn = null,time = data.time,anima = Anima(obj);
obj.innerHTML += obj.innerHTML;
var tag = Element.getChild(obj,data.tag),len = tag.length/2,movsize = -tag[0].offsetWidth,maxwidth = len * movsize;
function init(){
var str = "";
for(var i=0;
i<len;
i++){
str += i == cur ? '<li class = "on"></li>':'<li></li>';
}
;
ctrl.innerHTML = str;
span = $(ctrl,'li');
for(var i=0;
i<len;
i++){
ctrlArea(i);
}
;
auto();
}
;
function ctrlArea(num){
Event.add(span[num],'click',function(){
clear();
to = num * movsize;
move();
setnum(num);
}
)}
;
function setnum(c){
if (cur == c) return;
(c > len - 1) && (c = 0);
(c < 0) && (c = len - 1);
Element.addClass(span[c],"on");
Element.removeClass(span[cur],"on");
cur = c;
}
;
function add(w){
if(staus) return;
staus = true;
cun = cur;
if(w){
cun--;
if(cun<0){
cun = len-1;
obj.style.marginLeft = maxwidth + "px";
}
}
else{
cun++;
if(cun==1){
obj.style.marginLeft = 0;
}
}
to = cun * movsize;
move();
setnum(cun);
}
;
function move(){
anima.start({
marginLeft:to}
);
anima.complete(function(){
staus = false;
auto();
}
);
}
;
function clear(){
clearTimeout(fn);
fn = null}
;
function auto(){
clear();
if(time) fn = setTimeout(function(){
add(false)}
,time)}
;
Event.add(left,"click",function(){
add(true);
}
) Event.add(right,"click",function(){
add(false);
}
) Event.add(left,"mouseover",function(){
left.style.cssText = "opacity:1;
filter:alpha(opacity=100)";
}
);
Event.add(right,"mouseover",function(){
right.style.cssText = "opacity:1;
filter:alpha(opacity=100)";
}
);
Event.add(left,"mouseout",function(){
left.style.cssText = "";
}
);
Event.add(right,"mouseout",function(){
right.style.cssText = "";
}
);
Event.add(obj,"mouseover",clear);
Event.add(obj,"mouseout",auto);
init();
}
function hovershow(id){
var ycId = $(id,"dd");
for(var i=0;
i<ycId.length;
i++){
obj(i)}
;
function obj(n){
Event.add(ycId[n].parentNode,"mouseover",function(){
ycId[n].style.display = "block";
}
);
Event.add(ycId[n].parentNode,"mouseout",function(){
ycId[n].style.display = "none";
}
)}
}
;
function setbtn(id,style){
var o = $(id);
Event.add(o,"mouseover",function(){
Element.addClass(o,style);
}
);
Event.add(o,"mouseout",function(){
Element.removeClass(o,style);
}
);
}
function setinput(id,style){
var o = $(id);
Event.add(o,"focus",function(){
Element.addClass(o.parentNode,style);
}
);
Event.add(o,"blur",function(){
Element.removeClass(o.parentNode,style);
}
);
}
function sun(id){
function addEvent(o,sty,fun){
o.attachEvent?o.attachEvent("on"+sty,fun):o.addEventListener(sty,fun,false);
}
;
var timer=null,objDt=$(id),span=$(objDt,"span")[0];
addEvent(objDt,"mouseover",show);
addEvent(objDt,"mouseout",hide);
function show(){
clearTimer();
span.className="on";
}
function hide(){
clearTimer();
timer=setTimeout(function(){
span.className="";
}
,50);
}
function clearTimer(){
timer&&clearTimeout(timer);
timer=null;
}
}
function focus(id,time,callbackFun){
var obj = $(id),imgs = $(obj,'img'),dd = $(obj,'dd')[0],lis = null,current = 0,state = false,old = -1,time = time || 5000,autoTimer = null,lazyTimer = null,anima = [],moving = false,imgState = [];
function init(){
var str = '<ul>';
for(var i=0,l=imgs.length;
i<l;
i++){
imgState[i] = false;
changeState(i);
str += '<li>'+ (i+1) +'</li>';
anima[i] = Anima(imgs[i]);
}
str += '</ul>';
dd.innerHTML = str;
imgs[0].style.cssText += ';
opacity:1;
filter:alpha(opacity=100);
display:block;
z-index:2;
';
handle();
Event.add(obj,'mouseover',function(){
clear();
}
)Event.add(obj,'mouseout',function(){
play();
}
)//play();
preLoad(0,play);
if(callbackFun) callbackFun(0);
}
function preLoad(n,callback){
if(imgs[n].src == '' ) imgs[n].src = imgs[n].getAttribute('_src');
callback ? changeState(n,callback):changeState(n);
}
function changeState(n,callback){
//imgState[n] = true;
//if(callback) callback();
if(imgs[n].complete || imgs[n].readyState == 'loaded' || imgs[n].readyState == 'complete'){
imgState[n] = true;
if(callback) callback();
}
else{
Event.add(imgs[n],'load',function(){
imgState[n] = true;
if(callback) callback();
Event.remove(imgs[n],'load',arguments.callee);
}
)Event.add(imgs[n],'error',function(){
imgState[n] = true;
if(callback) callback();
Event.remove(imgs[n],'error',arguments.callee);
}
)}
var m = n+1;
if( m <= imgs.length-1 && !imgState[m]){
preLoad(m);
}
}
function auto(){
var next = current;
next++;
if( next > imgs.length-1){
next = 0;
}
if(!imgState[next]){
clear();
if(imgs[next].src == ''){
preLoad(next,auto);
return;
}
lazyTimer = setTimeout(function(){
lazyTimer = null;
auto();
}
,300);
return;
}
change(next);
}
function change(c){
moving = true;
if(callbackFun) callbackFun(c);
clear();
if(old>-1){
anima[old].cancel();
imgs[old].style.cssText = 'display:none';
}
old = current;
anima[old].cancel();
imgs[old].style.cssText += ';
display:block;
opacity:1;
filter:alpha(opacity=100);
z-index:1;
';
Element.removeClass(lis[old],'on');
current = c;
imgs[current].style.cssText += ';
display:block;
opacity:0;
filter:alpha(opacity=0);
z-index:2;
';
Element.addClass(lis[current],'on');
anima[current].start({
opacity:1}
);
anima[current].complete(function(){
moving = false;
play();
}
);
}
function handle(){
lis = $(dd,'li');
Element.addClass(lis[0],'on');
for(var i=0,l=lis.length;
i<l;
i++){
fun(i);
}
function fun(n){
Event.add(lis[n],'click',function(){
if(moving) return;
if(n==current) return;
if(imgs[n].src == '') imgs[n].src = imgs[n].getAttribute('_src');
change(n);
}
)}
}
function clear(){
clearTimeout(autoTimer);
clearTimeout(lazyTimer);
lazyTimer = null;
autoTimer = null;
}
function play(){
clear();
autoTimer = setTimeout(auto,time);
}
init();
}
function scroll(opt){
if(!opt) return;
var obj = $(opt.id),box = Element.getChild(obj,opt.boxTag)[0],list = Element.getChild(box,opt.singleTag),loop = opt.loop ? true:false,leftBtn = opt.leftBtn ? $(opt.leftBtn):null,rightBtn = opt.rightBtn ? $(opt.rightBtn):null,auto = opt.auto ? true:false,c = opt.current ? parseInt(opt.current):0,path = opt.path ? opt.path:'left',callback = opt.callback ? opt.callback:null,step = opt.step ? parseInt(opt.step):1,anima = null,singleSize = 0,length = list.length,max = 0,time = opt.time ? parseInt(opt.time):5000,state = false,from = 0,to = 0,fix =0,range = [0,0],move = null;
function init(){
if(path == 'left' || path =='right'){
singleSize = list[0]['offsetWidth'];
fix = Math.round(obj['offsetWidth']/singleSize);
}
else{
singleSize = list[0]['offsetHeight'];
fix = Math.round(obj['offsetHeight']/singleSize);
}
fix = Math.max(1,fix);
if(loop){
box.innerHTML += box.innerHTML;
fix = 0;
}
path = (path == 'left' || path == 'right') ? 'marginLeft':'marginTop';
max = singleSize*length;
anima = Anima(box,500);
to = -step*singleSize;
if(auto){
move = setTimeout(play,time);
range = [0,length];
box.innerHTML += box.innerHTML;
}
else{
range = [0,length-fix];
}
reset(c);
if(callback) callback(c,range);
handle();
}
function handle(){
if(leftBtn){
Event.add(leftBtn,'click',function(){
change();
}
)}
if(rightBtn){
Event.add(rightBtn,'click',function(){
change(null,true);
}
)}
Event.add(box,'mouseover',function(){
clear();
}
)Event.add(box,'mouseout',function(){
if(auto){
move = setTimeout(play,time);
}
}
)}
function change(m,type){
clear();
if(m||m==0){
c = m;
}
else{
var n = type ? 1:0;
if(state) return;
if(n){
if(c >= range[1]){
if(!auto && !loop) return;
reset(1-n);
}
c += step;
}
else{
if(c <= range[0]){
if(!auto && !loop) return;
reset(1-n);
}
c -= step;
}
}
to = -c*singleSize;
state = true;
var s ={
}
;
s[path] = to;
if(callback) callback(c,range);
anima.start(s);
anima.complete(function(){
state = false;
if(auto || loop){
if (c== range[n]){
reset(1-n);
}
}
if(auto){
move = setTimeout(play,time);
}
}
)}
function play(){
change(null,true);
}
function clear(){
clearTimeout(move);
move = null;
}
function reset(n){
box.style[path] = -Math.abs(range[n]*singleSize) + 'px';
c = range[n];
}
init();
function setChange(s){
return change(s);
}
return{
setChange:setChange}
}
function dropMenu(id,tag,type){
var obj = $(id),menu = $(obj,tag)[0],timer = null,state = false,type = type || 'click';
if(!obj || !menu) return;
Event.add(obj,type,function(e){
clear();
if(state && type == 'click'){
Element.removeClass(menu,'on');
state = false;
return;
}
Element.addClass(menu,'on');
state = true;
}
)if(type == 'click'){
Event.add(obj,'mouseover',function(){
if(!state) return;
clear();
Element.addClass(menu,'on');
state = true;
}
)}
Event.add(obj,'mouseout',function(){
if(timer) return;
timer = setTimeout(function(){
clear();
state = false;
Element.removeClass(menu,'on');
}
,100)}
)function clear(){
if(timer){
clearTimeout(timer);
timer = null;
}
}
}
window['yo'] ={
'tagSwitch':tagSwitch,'inputFocus':inputFocus,'loadScript':loadScript,'lazyLoad':lazyLoad,'menu':menu,'autoWidthMove':autoWidthMove,'hovershow':hovershow,'setbtn':setbtn,'setinput':setinput,'sun':sun,'scroll':scroll,'dropMenu':dropMenu,'focus':focus}
}
)();
CSS代码(master.css):
CSS代码(menu.css):
/*reset--------------------*/
*{margin:0;padding:0;}
img{border:none;padding:0;margin:0;}
/*link & type--------------------*/
body{background:#28953a;}
body,div{font:12px/20px "微软雅黑";margin:0;}
div{margin:0 auto;}
ul,dl,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
.floatlft{float:left;}
.floatrgt{float:right;}
.Inline{display:inline;}
.bold,.bold a{font-weight:bold;}
.overauto{overflow:auto;}
a{color:#676767;text-decoration:none;}
a:hover{color:#0265ca;text-decoration:underline;}
/*menu开始*/
#menu_bg{left:29px;top:25px;position:absolute;z-index:11;height:50px;width:915px}
#menu_bg .imenu_bg{width:915px;height:50px;margin:0 auto;position:relative;top:0;}
.imenu{width:182px;height:50px;line-height:50px;text-align:center;font-family:"微软雅黑";font-size:16px;cursor:pointer;color:#FFF;float:left;background:transparent url(../images/nav-bg.jpg) repeat-x;margin-right:1px;}
.imenu a{color:#FFF;text-decoration:none}
.imenu a:hover{text-decoration:underline;}
.imenu_on{width:182px;height:50px;background-color:#FFF;color:#015d22;cursor:pointer;float:left;line-height:50px;text-align:center;font-family:"微软雅黑";font-size:16px;margin-right:1px;font-weight:bold;}
.imenu_on a{color:#015d22;text-decoration:none;}
.imenu_on a:hover{color:#015d22;text-decoration:underline;}
.submnu{width:915px;*width:915px;_width:915px;border-top:none;margin:0 auto;display:none;position:absolute;left:0px;top:50px;z-index:1000;background-color:#FFFFFF;filter:alpha(opacity=95);-moz-opacity:0.8;}
/*---------------叶子中心---------------*/
#gyyz{width:915px;height:130px;margin:10px 0 0 15px;}
#gyyz ul{font-weight:bold;height:120px;float:left;text-align:left;margin-right:10px;width:120px;*width:120px;_width:120px;float:left;}
#gyyz ul.li_content li{line-height:24px;text-align:left;height:24px;background:url(../images/nav-icon.gif) no-repeat left center;padding-left:18px;}
#gyyz ul.li_content li a{margin-left:6px;font-family:"微软雅黑";font-size:14px;font-weight:bold;color:#015d22;height:24px;line-height:24px;}
#gyyz ul.li_content li a:hover{color:#015d22;line-height:24px;height:24px;text-decoration:underline;}
#gyyz ul.li_content li img{padding-top:8px;}
#gyyz .pic001{margin-top:10px;float:left;}
#gyyz .pic001 img{float:left;height:106px;width:179px;margin-right:15px;padding:5px;border:1px solid #c9caca;}
/*---------------叶子中心---------------*/
/*---------------整形美容中心---------------*/
#zx{height:240px;width:915px;margin:10px 0 0 15px;}
.s-zx{height:160px;float:left;}
.s-zx ul{font-weight:bold;height:150px;*height:150px;text-align:left;float:left;width:113px;*width:113px;_width:113px;}
.s-zx ul.li_content li{line-height:22px;color:#898989;font-family:"宋体";height:22px;text-align:left;background:url(../images/icon2.gif) no-repeat left center;padding-left:10px;font-weight:normal;}
.s-zx ul.li_content li a{font-size:12px;color:#898989;}
.s-zx ul.li_content li a:hover{color:#015d22;line-height:22px;height:22px;text-decoration:underline;}
.s-zx ul.li_content li img{padding-top:8px;}
.s-zx ul.li_content .zxdl{font-size:14px;font-weight:bold;font-family:"微软雅黑";color:#015d22;line-height:24px;text-align:left;height:24px;background:url(../images/nav-icon.gif) no-repeat left center;padding-left:18px;}
.s-zx ul.li_content .zxdl a{font-size:14px;font-weight:bold;color:#015d22;}
#zx .piczx{height:66px;float:left;width:915px;margin-top:5px;}
#zx .piczx img{height:66px;width:100px;float:left;border:1px solid #bdb9b8;margin-right:11px;}
/*---------------整形美容中心---------------*/
/*---------------皮肤美容中心---------------*/
#pf{height:300px;width:915px;margin:10px 0 0 15px;}
.s-pf{height:160px;float:left;}
.s-pf ul{font-weight:bold;height:150px;*height:150px;text-align:left;float:left;width:150px;*width:150px;_width:150px;}
.s-pf ul.li_content li{line-height:22px;color:#898989;font-family:"宋体";height:22px;text-align:left;background:url(../images/icon2.gif) no-repeat left center;padding-left:10px;font-weight:normal;}
.s-pf ul.li_content li a{font-size:12px;color:#898989;}
.s-pf ul.li_content li a:hover{color:#015d22;line-height:22px;height:22px;text-decoration:underline;}
.s-pf ul.li_content li img{padding-top:8px;}
.s-pf ul.li_content .zxdl{font-size:14px;font-weight:bold;font-family:"微软雅黑";color:#015d22;line-height:24px;text-align:left;height:24px;background:url(../images/nav-icon.gif) no-repeat left center;padding-left:18px;}
.s-pf ul.li_content .zxdl a{font-size:14px;font-weight:bold;color:#015d22;}
#pf .piczx{height:122px;float:left;width:915px;margin-top:5px;}
#pf .piczx img{height:122px;width:280px;float:left;padding:2px;border:1px solid #bdb9b8;margin-right:11px;}
/*---------------皮肤美容中心---------------*/
/*---------------无创美容中心---------------*/
#wc{width:915px;height:150px;margin:10px 0 0 15px;}
#wc ul{font-weight:bold;height:140px;float:left;text-align:left;margin-right:5px;width:110px;*width:110px;_width:110px;float:left;}
#wc ul.li_content li{line-height:22px;color:#898989;font-family:"宋体";height:22px;text-align:left;background:url(../images/icon2.gif) no-repeat left center;padding-left:10px;font-weight:normal;}
#wc ul.li_content li a{font-size:12px;color:#898989;}
#wc ul.li_content li a:hover{color:#015d22;line-height:22px;height:22px;text-decoration:underline;}
#wc ul.li_content li img{padding-top:8px;}
#wc ul.li_content .zxdl{font-size:14px;font-weight:bold;font-family:"微软雅黑";color:#015d22;line-height:24px;text-align:left;height:24px;background:url(../images/nav-icon.gif) no-repeat left center;padding-left:18px;}
#wc ul.li_content .zxdl a{font-size:14px;font-weight:bold;color:#015d22;}
#wc .pic001{margin-top:10px;float:left;}
#wc .pic001 img{float:left;height:120px;width:160px;margin-right:10px;padding:5px;border:1px solid #c9caca;}
/*---------------无创美容中心---------------*/
/*---------------牙齿美容中心---------------*/
#mc{width:915px;height:150px;margin:10px 0 0 15px;}
#mc ul{font-weight:bold;height:140px;float:left;text-align:left;margin-right:5px;width:125px;*width:125px;_width:125px;float:left;}
#mc .ul2{font-weight:bold;height:140px;float:left;text-align:left;margin-right:5px;width:150px;*width:150px;_width:150px;float:left;}
#mc ul.li_content li{line-height:22px;color:#898989;font-family:"宋体";height:22px;text-align:left;background:url(../images/icon2.gif) no-repeat left center;padding-left:10px;font-weight:normal;}
#mc ul.li_content li a{font-size:12px;color:#898989;}
#mc ul.li_content li a:hover{color:#015d22;line-height:22px;height:22px;text-decoration:underline;}
#mc ul.li_content li img{padding-top:8px;}
#mc ul.li_content .zxdl{font-size:14px;font-weight:bold;font-family:"微软雅黑";color:#015d22;line-height:24px;text-align:left;height:24px;background:url(../images/nav-icon.gif) no-repeat left center;padding-left:18px;}
#mc ul.li_content .zxdl a{font-size:14px;font-weight:bold;color:#015d22;}
#mc .pic001{margin-top:10px;float:left;}
#mc .pic001 img{float:left;height:115px;width:150px;margin-right:10px;padding:5px;border:1px solid #c9caca;}
/*---------------牙齿美容中心---------------*/
分享到QQ
分享到微博
微信扫一扫
