基于jQuery仿百度首页换肤功能代码

分享一款基于jQuery仿百度首页换肤功能代码。这是一款类似百度首页的自定义背景图片切换特效代码。

在线预览 源码下载

实现的代码。

html代码：

<ahref="#">换肤</a><divclass="heitiao"></div><divclass="con"><imgsrc="images/content.png"/></div><divclass="head"><divclass="menu"><divclass="title"><pclass="p1"></p><pclass="p2"></p></div><divclass="bg"><divclass="bgcon"><imgclass="big"src="images/bg0s.jpg"><imgsrc="images/bg1s.jpg"><imgsrc="images/bg2s.jpg"><imgsrc="images/bg3s.jpg"><imgsrc="images/bg4s.jpg"><imgsrc="images/bg5s.jpg"><imgclass="big"src="images/bg6s.jpg"><imgsrc="images/bg7s.jpg"><imgsrc="images/bg8s.jpg"><imgclass="last"src="images/bg9s.jpg"><imgclass="last"src="images/bg10s.jpg"><imgclass="last"src="images/bg11s.jpg"></div><divclass="bgyl"><imgsrc="images/yl.png"></div></div></div></div><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/Javascript">vari=1;

$("a").click(function(){

$(".head").animate({height:"288px"},500);

});

$(".p2").click(function(){

$(".head").animate({height:"0px"},500);

});

$(".bgcon img").hover(function(){

i=$(this).index();

$(".bgyl").CSS("background",'url(images/bg'+i+'.jpg)');

$(".bgyl").css("background-size","264px 180px");

});

$(".bgcon img").click(function(){

$("body").css("background",'url(images/bg'+i+'.jpg)');

});</script>

css代码：

*{margin:0;padding:0}a{color:#fff;margin-top:10px;display:block;margin-left:18%;font-size:13px;position:absolute;

}body{background:url(images/bg0.jpg);}.con{width:911px;height:317px;margin:50px auto;}.head{width:100%;height:0px;background:#fff;position:fixed;left:0px;top:0px;border-bottom:1px solid #e3e3e3;overflow:hidden;

}.title{width:911px;height:45px;margin:0px auto;}.heitiao{width:100%;height:35px;background:rgba(0,0,0,0.7);

}.menu{width:100%;height:45px;border-bottom:1px solid #e3e3e3;}.p1{width:861px;height:45px;background:url(images/p1.png);float:left;cursor:pointer;}.p2{width:50px;height:45px;background:url(images/sp.png);float:right;cursor:pointer;

}.bg{width:911px;height:205px;margin:25px auto;}.bgcon{width:590px;height:190px;float:left;

}.bgcon img{width:97px;height:59px;display:block;float:left;margin-right:1px;margin-bottom:1px;

}.bgcon .big{width:195px;height:119px;}.bgcon .last{position:relative;top:-60px;

}.bgyl{width:264px;height:180px;float:right;background:url(images/bg1s.jpg);background-size:294px;}

via:http://www.w2bc.com/article/57638