基于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 相关文章推荐
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
js正则表达式简单校验方法
Jan 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
第十三节--对象串行化
2006/11/16 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python学生管理系统开发
2019/01/30 Python
详解Django配置JWT认证方式
2020/05/09 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
社区志愿者心得体会
2014/01/03 职场文书
上课睡觉检讨书
2014/01/28 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
男人帮观后感
2015/06/18 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
Django模型层实现多表关系创建和多表操作
2021/07/21 Python