基于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 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
js实现盒子滚动动画效果
Aug 09 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
建立动态的WML站点(三)
2006/10/09 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php读取本地json文件的实例
2018/03/07 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
节能减耗标语
2014/06/21 职场文书
总经理年会致辞
2015/07/29 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python