编程 Javascript

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

Posted in Javascript onJuly 10, 2016

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});
 });
});

效果图：

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

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

作者：wangwangwangMax

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

- Author -

wangwangwangMax

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js打印纸函数代码（递归）

Jun 18 Javascript

ie8本地图片上传预览示例代码

Jan 12 Javascript

js获取页面description的方法

May 21 Javascript

php结合imgareaselect实现图片裁剪

Jul 05 Javascript

javascript数据结构之二叉搜索树实现方法

Nov 25 Javascript

jquery采用oop模式class类的使用示例

Jan 22 Javascript

jQuery提示插件qTip2用法分析(支持ajax及多种样式)

Jun 08 Javascript

js基于FileSaver.js 浏览器导出Excel文件的示例

Aug 15 Javascript

element-ui table span-method(行合并)的实现代码

Dec 20 Javascript

vue集成kindeditor富文本的实现示例代码

Jun 07 Javascript

一步一步实现Vue的响应式(对象观测)

Sep 02 Javascript

vue动画—通过钩子函数实现半场动画操作

Aug 09 Javascript

深入解析Javascript闭包的功能及实现方法

Jul 10 #Javascript

js重写方法的简单实现

Jul 10 #Javascript

JS实现控制文本框的内容

Jul 10 #Javascript

文本框只能输入数字的js代码(含小数点)

Jul 10 #Javascript

jquery实现跳到底部，回到顶部效果的简单实例(类似锚)

Jul 10 #Javascript

JS实现点击事件统计的简单实例

Jul 10 #Javascript

JS 面向对象之继承---多种组合继承详解

Jul 10 #Javascript