基于jQuery实现仿百度首页换肤背景图片切换代码

发布时间:2017-04-13 15:44:32 编辑:站点网
不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦~
在线预览 源码下载html代码:<a href="#">换肤</a><div class="heitiao"></div><div class="con"><img src="images/content.png" /></div><div class="head"><div class="menu"><div class="title"> <p class="p1"></p> <p class="p2"></p></div><div class="bg"><div class="bgcon"><img class="big" src="images/bg0s.jpg"><img src="images/bg1s.jpg"><img src="images/bg2s.jpg"><img src="images/bg3s.jpg"><img src="images/bg4s.jpg"><img src="images/bg5s.jpg"><img class="big" src="images/bg6s.jpg"><img src="images/bg7s.jpg"><img src="images/bg8s.jpg"><img class="last" src="images/bg9s.jpg"><img class="last" src="images/bg10s.jpg"><img class="last" src="images/bg11s.jpg"></div><div class="bgyl"> <img src="images/yl.png"></div></div></div></div><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> var i=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>
更多相关内容:
    无相关信息
[!--temp.cy--]