分享一款基于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