不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦~

基于jQuery实现仿百度首页换肤背景图片切换代码

在线预览    源码下载

html代码:

<a href="#">换肤</a>
<div class="heitiao"></div>
<div class="con"><img src="/UploadFiles/2021-04-02/content.png">

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实现仿百度首页换肤背景图片切换代码,希望大家喜欢。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。