仿百度主页后台图像切换代码基于皮肤

没什么要说的,先显示一下效果图,这篇文章支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦












在线预览源代码下载

HTML代码:


换肤































var I=1;
$()。Click(函数(){)
$(,)。动画({高度:288px},500);
});
$()。Click(函数(){)
$(,)。动画({高度:0px},500);
});
$(。bgcon IMG)。Hover(function(){)
i = $(this);
$(。bgyl )Css(背景。
$(。bgyl)。Css(背景大小
});
$(。bgcon IMG)。Click(function(){)
$()Css(背景
});



CSS代码:


*边距:0;填充:0 }
一个{颜色:# FFF;
边距:10px;
显示块;
左缘:18%;
字体大小:13px;
位置:绝对;
}
体{背景:URL(图像/ bg0 .jpg);}
骗子:911px {宽度;
身高:317px;
保证金:50px汽车;}
头部宽度:100%;
身高:0px;
背景:# FFF;
位置:固定;
左:0px;
上图:0px;
底部边框:1px solid # e3e3e3;
溢出:隐藏;
}
标题:911px {宽度;
身高:45px;
保证金:为0px auto;}
heitiao {宽度:100%;
身高:35px;
背景:RGBA(0,0,0,0.7);
}
菜单{宽度:100%;
身高:45px;
底部边框:1px solid # e3e3e3;}
P1 {宽度:861px;
身高:45px;
背景:URL(图像PNG);
浮点数:左;
游标;指针;}
P2 {宽度:50px;
身高:45px;
背景:URL(图像/ sp.png);
浮子:右边;
光标:指针;
}
BG {宽度:911px;
身高:205px;
保证金:25px汽车;}
bgcon {宽度:590px;
身高:190px;
浮点数:左;
}
bgcon img {宽度:97px;
身高:59px;
显示块;
浮点数:左;
右边距:1px;
边距:1px;
}
。bgcon。大{宽度:195px;
身高:119px;}
最后,bgcon {位置相对;
上图:- 60px;
}
bgyl {宽度:264px;
身高:180px;
浮子:右边;
背景:URL(图像/ bg1s .jpg);
背景尺寸:294px;}


以上代码是本文介绍的仿百度仿皮肤背景图像切换的基础代码,希望大家喜欢。