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

不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦~

在线预览    源码下载

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

以上代码就是本文介绍基于jQuery实现仿百度首页换肤背景图片切换代码,希望大家喜欢。

(0)

相关推荐

  • jQuery基于cookie实现换肤功能实例

    本文实例讲述了jQuery基于cookie实现换肤功能.分享给大家供大家参考,具体如下: 换肤,在你使用QQ.浏览器.酷狗等软件时,总是能看到这两个字(也有叫皮肤).不过换肤的确能解决很多人的口味,换肤看似一个无关紧要的功能,但其实能起到吸引用户的作用.好啦,话不多说,开始上课. 附上本人的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

  • jQuery实现的网页换肤效果示例

    本文实例讲述了jQuery实现的网页换肤效果.分享给大家供大家参考,具体如下: 现在许多后台网站都有换皮肤的效果,今天我用 jquery 写了这个效果,主要思路是改变 link 标签的 href 属性值. html 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>网页换肤效果</title&

  • 基于jquery ui的alert,confirm方案(支持换肤)

    实现功能: 1.修改标题样式.把jquery ui的标题样式放上去.支持换肤. 2.修改按钮样式,换成jqueryui的button按钮样式. 3.将模式化窗口的背景换成了jqueryui的模式化背景. 代码: //首先要引入jquery,以及ui的包和皮肤的样式如: <script src="../js/ui/jquery-1.11.0.min.js"></script> <script src="../js/ui/jquery-migrate

  • jQuery实现简单的网页换肤效果示例

    本文实例讲述了jQuery实现简单的网页换肤效果.分享给大家供大家参考,具体如下: 这里有4个文件:skin.html.blue.css.green.html.red.html,都放在同一目录下. 1.skin.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

  • Bootstrap框架结合jQuery仿百度换肤功能实例解析

    换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的过程当中,我采用了Bootstrap框架,以便更好的适应屏幕.(当然也是为了更好的熟悉使用这个框架,大家别忘了把Bootstrap框架的css和js包引进来哦).在创建项目时最好可以分别将css.js.images分开. 首先是布局,我只是布局了一下换肤的简单界面,其中就是一些按钮和图片,为了简单实

  • 使用jQuery实现Web页面换肤功能的要点解析

    网页换肤是一门老技术了,老的现在都不怎么流行了.但是,有时候有些客户就是想要这个换肤功能.于是就实践做了一下网页换肤,结果遇到了很多问题. 网页换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie

  • jquery cookie实现的简单换肤功能适合小网站

    前段时间试着使用jquery cookie的时候,做了一个简单的换肤功能,只适合小网站并且代码低级. 首先引入jquery和cookie插件 复制代码 代码如下: <script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script> <script type="text/javascript" src="__PUBLIC__/js/co

  • jQuery实现给页面换肤的方法

    本文实例讲述了jQuery给页面换肤的方法.分享给大家供大家参考.具体分析如下: 给页面换肤的效果有不少同学做过,今天在逛blog时也发现一段使用jQuery换肤的代码,贴上与大家分享一下: $(document).ready(function(){ $('#styleSwitch .button').bind('click', function(){ $('body').removeClass(); //remove all the other classes $('#styleSwitch

  • JQuery 网站换肤功能实现代码

    从那以后,我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法.但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程. 我将向你们逐步解说整个的过程,不仅仅因为要展示jQuery代码的简介,同时也要揭示jQuery库中的若干高级特性. 首先,代码 复制代码 代码如下: $(document).ready(function() { $('.styleswitch').click(function() { switchStylestyle(this.getAttribute("rel

  • jQuery之网页换肤实现代码

    下面是代码: 首先HTML页面代码如下: 复制代码 代码如下: <!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> &l

  • jQuery结合jQuery.cookie.js插件实现换肤功能示例

    本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu

随机推荐