js仿百度切换皮肤功能(html+css)


Posted in Javascript onJuly 10, 2016

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

js仿百度切换皮肤功能(html+css)

要点: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

Javascript 相关文章推荐
基于jquery的一个浮动框(扩展性比较好 )
Aug 27 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
JS字符串截取函数实例
Dec 27 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 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
You might like
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
xmlHTTP实例
2006/10/24 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python实现图片拼接的代码
2018/07/02 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
简单了解python关系(比较)运算符
2019/07/08 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
学年自我鉴定范文
2013/10/01 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
组织关系转移介绍信
2014/01/16 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
现场活动策划方案
2014/08/22 职场文书
社区助残日活动总结
2014/08/29 职场文书
离婚财产处理协议书
2014/09/30 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript