基于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 指南/入门基础
Nov 30 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
Vuex提升学习篇
Jan 11 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
php实现记事本案例
2020/10/20 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python实现简单多线程任务队列
2016/02/27 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python dict的常用方法示例代码
2020/06/23 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
自我鉴定范文300字
2013/10/01 职场文书
年会活动策划方案
2014/01/23 职场文书
出纳会计岗位职责
2014/03/12 职场文书
教师专业自荐信
2014/05/31 职场文书
毕业生求职信
2014/06/10 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
PyTorch的Debug指南
2021/05/07 Python
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python