脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js切换皮肤

js仿百度切换皮肤功能（html+css）

 更新时间：2016年07月10日 14:14:49   作者：wangwangwangMax  
这篇文章主要为大家详细介绍了JavaScript仿百度切换皮肤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

js仿百度切换皮肤效果：(换肤出来一个div，选择你想要的图片，作为网页背景，保存) 

要点：cookie保存状态
html代码:

<body>
 <div id="header">
 <div id="header_con">
  <div class="dbg"><a href="javascript:;" onclick="showImgBox()">换肤</a></div>
 </div>
 </div>
 
 <div id="dimgBox">
 <div id="dimgtitle">
  <div id="imgtitle_con">
  <div id="title1"><a href="javascript:;">热门</a></div>
  <div id="title2"><a href="javascript:;" onclick="hideImgBox()">收起</a></div>
  </div>
 </div>
 <div id="imglist">
  <div class="imgitem"><img src="image/bg0.jpg" /></div>
  <div class="imgitem"><img src="image/bg1.jpg" /></div>
  <div class="imgitem"><img src="image/bg2.jpg" /></div>
  <div class="imgitem"><img src="image/bg3.jpg" /></div>
  <div class="imgitem"><img src="image/bg4.jpg" /></div>
 </div>
 </div>
</body>

css代码:

* {
 margin:0px;
 padding:0px;
}
#header {
 height:40px;
 width:100%;
 background:#000000;
}

a {
 text-decoration:none;
}

.dbg {
 float:left;
}

#dimgBox {
 width:100%;
 height:140px;
 /*position:absolute;*/
 background:#ffffff;
 top:0px;
 left:0px;
 display:none;
}
#dimgtitle {
 height:40px;
 width:100%;
 border-bottom:solid 1px #ccc;
}
#imgtitle_con {
 width:1180px;
 height:40px;
 margin:0px auto;
 line-height:40px;
}
#title1 {
 float:left;
}
#title1 a {
 display:block;
 background:#04a6f9;
 height:40px;
 color:#ffffff;
 text-align:center;
}
#title2 {
 float:right;
}
#imglist {
 height:65px;
 width:1180px;
 margin: 0px auto;
}
.imgitem {
 float:left;
 margin-top:10px;
 margin-left:5px;
}
.imgitem img {
 width:100px;
}

js代码：

function showImgBox()
{
 $("#dimgBox").slideDown();
}
function hideImgBox()
{
 $("#dimgBox").slideUp();
}


$(function ()
{
 //5.页面打开之后判断它是否存在
 if ($.cookie("bg-pic") == "" || $.cookie("bg-pic")==null)
 {
 //6.不存在就把第一张设为默认背景
 $("body").css("background-image", "url(image/bg0.jpg)");
 }
 else
 {
 //6.如果存在就把$.cookie("bg-pic")传进去,上一次保存的值给它
 $("body").css("background-image", "url('" + $.cookie("bg-pic") + "')");
 //
 }
 //1.找到imgtiem下面的img标签，执行单击事件
 $(".imgitem img").click(function ()
 {
 //2.关键是要获取到当前图片的src的值,设为变量保存起来
 var src = $(this).attr("src");
 //3.把它作为网页的背景样式
 $("body").css("background-image","url('"+src+"')");
 //4.保存状态
 $.cookie("bg-pic", src, {expires:1});
 });
});

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

作者：wangwangwangMax

您可能感兴趣的文章:

相关文章

  • BootStrap栅格之间留空隙的解决方法

    BootStrap栅格之间留空隙的解决方法

    BootStrap栅格系统可以把我们的container容器划分为若干等分，如果想要每个部分之间留出一定的空隙，那么应该怎么解决，本文就来介绍一下
    2021-08-08
  • javascript简单计算器 可美化

    javascript简单计算器 可美化

    javascript简单计算器 可美化，需要的朋友可以测试下。参考下实现原理。
    2011-10-10
  • javascript ajax 仿百度分页函数

    javascript ajax 仿百度分页函数

    百度分页想必大家都知道吧，浏览网页的朋友都应该知道，下面有个小例子使用到了js、ajax等来模仿百度的分页，感兴趣的朋友可以参考下
    2013-10-10
  • JavaScript实现轮播图效果代码实例

    JavaScript实现轮播图效果代码实例

    这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 利用MutationObserver实现计算首屏时间

    利用MutationObserver实现计算首屏时间

    在前端开发中，优化页面性能是至关重要的，计算首屏时间是衡量网页性能的重要指标，本文将介绍如何使用MutationObserver来获取首屏时间的最佳实践，感兴趣的可以了解下
    2023-07-07
  • JavaScript字符串对象(string)基本用法示例

    JavaScript字符串对象(string)基本用法示例

    这篇文章主要介绍了JavaScript字符串对象(string)基本用法,结合实例形式分析了js字符串的添加、计算、获取、替换等操作实现技巧,需要的朋友可以参考下
    2017-01-01
  • 原生js实现焦点轮播图效果

    原生js实现焦点轮播图效果

    本文主要分享了原生js实现焦点轮播图效果的示例代码，并解析了实例中的注意点。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • Ajax提交与传统表单提交的区别说明

    Ajax提交与传统表单提交的区别说明

    本篇文章主要是对Ajax提交与传统表单提交的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • 微信小程序网络请求的封装与填坑之路

    微信小程序网络请求的封装与填坑之路

    本文主要介绍了关于小程序网络请求的封装的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • JavaScript canvas实现跟随鼠标事件

    JavaScript canvas实现跟随鼠标事件

    这篇文章主要为大家详细介绍了JavaScript canvas实现跟随鼠标事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论