下面小编就为大家带来一篇仿百度换肤功能的简单实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。
效果：(换肤出来一个div，选择你想要的图片，作为网页背景，保存)
要点：cookie保存状态
html代码：
<body>
<div id="header">
<div id="header_con">
<div><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><img src="image/bg0.jpg" /></div>
<div><img src="image/bg1.jpg" /></div>
<div><img src="image/bg2.jpg" /></div>
<div><img src="image/bg3.jpg" /></div>
<div><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});
});
});
以上这篇仿百度换肤功能的简单实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考
- 2014年襄阳市老河口市省农村教师招聘选岗方案
- 2014年深圳市南山区园长/班主任招聘启事
- 2014年肇庆端州区招聘中小学教师拟录人员第二批体检结果的公告
- 2014年肇庆端州区招聘中小学教师拟录人员第二批体检结果的公告
- 2014年浙江传媒学院拟聘人员公示
- 2014年深圳市南山区西丽幼儿园教师招聘启事
- 2014年深圳市南山区语文及其它学科教师招聘启事
- 2014年深圳市南山区中信红树湾培基幼儿园配班教师招聘启事
- 2014年深圳市南山区中信红树湾培基幼儿园幼儿园园医招聘启事
- 2014年深圳市南山区中信红树湾培基幼儿园班主任招聘启事
- 2014年漳州市崇文学校招聘中小学学科教师启事
- 2014年深圳市南山区华侨城第一幼儿园配班教师招聘启事
- 2014年深圳市南山区教师/保育员招聘启事
- 南充市六县(区)中小学校2014年7月招聘教师岗位调整公告
- 2014年毕节市金沙县招聘小学教师公告(第五号)
- 2014年滁州市凤阳县残疾人综合服务中心招聘康复教师的公告
- 南充市顺庆区2014年考核招聘农村音乐/体育/美术教师公告
- 2014年玉林高级中学招聘教师公告
- 潍坊市高密市2014年教育系统事业单位招聘教师成绩公示及资格审查通知
- 潍坊市高密孚日学校2014年招聘优秀教师资格审查通知
- 2014年玉林市教育局直属学校双向选择招聘教师聘用前公示
- 2014年毕节市金沙县招聘小学教师调整招聘计划情况表
- 汕头市金平区2014年招聘新教师和教辅人员公告
- 长沙市宁乡县2014年招聘中小学教师和幼师体检通知
- 2014年新疆师范高等专科学校（新疆教育学院）招聘部分岗位综合成绩及体检公告
- roll of film
- roll of film
- roll of honour
- roll-of-honour
- roll-on
- roll-on
- law of physics
- law-of-the-jungle
- law report
- law-report
- 潜精研思
- 潜精积思
- 潜蛟困凤
- 潜踪匿影
- 潜踪蹑迹
- 潜踪隐迹
- 潜鳞戢羽
- 潜龙伏虎
- 潢池弄兵
- 潢池盗弄
- 老师给学生的毕业赠言说说80句
- 80句关于友情毕业赠言说说
- 关于校园的毕业赠言文案80句
- 关于毕业流泪的毕业赠言80句
- 80句关于夏天的毕业赠言说说
- 关于勿忘我的毕业赠言80句
- 关于同桌的毕业赠言80句简短
- 关于同学录的毕业赠言说说80句
- 关于朋友的毕业赠言说说80句
- 关于青春毕业赠言说说80句