基于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 简便实现页面元素数据验证功能
Mar 24 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
PHP安全下载文件的方法
2016/04/07 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
Python简单的制作图片验证码实例
2017/05/31 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
50道外企软件测试面试题
2014/08/18 面试题
电气专业应届生求职信
2013/11/01 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
教师党员思想汇报
2014/01/06 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL