基于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 相关文章推荐
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
node内置调试方法总结
Feb 22 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Structs界面控制层技术
2013/10/11 面试题
书法培训心得体会
2014/01/05 职场文书
铁路个人事迹材料
2014/01/30 职场文书
触电现场处置方案
2014/05/14 职场文书
暑期培训班招生方案
2014/08/26 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
医院营销工作计划
2015/01/16 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
2016大一新生军训感言
2015/12/08 职场文书
学术会议开幕词
2016/03/03 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
php png失真的原因及解决办法
2021/11/17 PHP
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技