基于jQuery仿百度首頁換膚功能代碼

2024-04-27 15:00:49

字體：大中小

供稿：網(wǎng)友

分享一款基于jQuery仿百度首頁換膚功能代碼。這是一款類似百度首頁的自定義背景圖片切換特效代碼。

在線預(yù)覽源碼下載

實(shí)現(xiàn)的代碼。

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>

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;}