帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery实现的仿百度换肤功能代码

帝国模板之家 2020-11-02 网页特效 评论

这是一款使用jquery实现的仿百度换肤功能,代码简洁,实用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>百度换肤</title>
<style type="text/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;}
</style>
</head>

<body>
<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>

</body>
</html>
只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言