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


Posted in Javascript onAugust 25, 2015

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

在线预览    源码下载

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实现仿百度首页换肤背景图片切换代码,希望大家喜欢。

Javascript 相关文章推荐
jQuery实现的立体文字渐变效果
May 17 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 #Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 #Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 #Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 #Javascript
js实现的tab标签切换效果代码分享
Aug 25 #Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 #Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 #Javascript
You might like
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
python回调函数中使用多线程的方法
2017/12/25 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
html Table 表头固定的实现
2019/01/22 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
性能测试工程师的面试题
2015/02/20 面试题
执行总经理岗位职责
2014/02/03 职场文书
商铺门面租房协议书
2014/10/21 职场文书
化工见习报告范文
2014/10/31 职场文书
学生会个人总结范文
2015/02/15 职场文书
业务员辞职信范文
2015/03/02 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
2015年中秋节主持词
2015/07/30 职场文书
法院执行局工作总结
2015/08/11 职场文书
推普标语口号大全
2015/12/26 职场文书
z-index不起作用
2021/03/31 HTML / CSS
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
详解flex:1什么意思
2022/07/23 HTML / CSS