来自 计算机网络 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

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

很少说了,先给大家来得效果图,本文辅助源码下载哦,要求的爱侣能够平昔下载使用,代码很简短哦~

正文实例陈述了jQuery给页面换肤的主意。分享给大家供大家仿效。具体剖析如下:

给页面换肤的法力有好些个同班做过,今日在逛blog时也开掘一段使用jQuery换肤的代码,贴上与大家享受一下:

在线预览    源码下载

$(document).ready(function(){
  $('#styleSwitch .button').bind('click', function(){
    $('body').removeClass();
    //remove all the other classes
    $('#styleSwitch .button').removeClass('selected');
    $(this).addClass('selected');
    switch(this.id){
      case 'style1':
        $('body').addClass('style1');
        break;
      case 'style2':
        $('body').addClass('style2');
        break;
      case 'style3':
        $('body').addClass('style3');
        break;
    }
    return false;
  });
});

html代码:

盼望本文所述对大家的jQuery程序设计具有协理。

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

您恐怕感兴趣的小说:

  • jQuery基于cookie实现换肤功效实例
  • jQuery落成的网页换肤效果示例
  • jQuery达成轻松的网页换肤效果示例
  • Bootstrap框架结合jQuery仿百度换肤功效实例深入分析
  • 行使jQuery达成Web页面换肤功效的要义剖析
  • 据悉jQuery完毕仿百度首页换肤背景图片切换代码
  • 基于jquery ui的alert,confirm方案(支持换肤)
  • jquery cookie实现的简练换肤功效适合小网址
  • jQuery之网页换肤达成代码
  • JQuery 网站换肤成效实今世码
  • jQuery结合jQuery.cookie.js插件完毕换肤功效示例

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

以上代码便是本文介绍基于jQuery达成仿百度首页换肤背景图片切换代码,希望大家爱不忍释。

您也许感兴趣的稿子:

  • jQuery基于cookie完毕换肤功能实例
  • jQuery达成的网页换肤效果示例
  • jQuery实现轻巧的网页换肤效果示例
  • Bootstrap框架结合jQuery仿百度换肤效率实例解析
  • 行使jQuery完成Web页面换肤作用的中心深入分析
  • jQuery达成给页面换肤的方法
  • 基于jquery ui的alert,confirm方案(帮衬换肤)
  • jquery cookie完成的简单换肤成效适合小网址
  • jQuery之网页换肤完结代码
  • JQuery 网址换肤功效实现代码
  • jQuery结合jQuery.cookie.js插件达成换肤成效示例

本文由六合联盟网发布于计算机网络,转载请注明出处:基于jQuery实现仿百度首页换肤背景图片切换代码

关键词: