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 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
微信小程序block的使用教程
Apr 01 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
angular中的post请求处理示例详解
Jun 30 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
用文本作数据处理
2006/10/09 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python爬虫基础之urllib的使用
2020/12/31 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
员工晚婚的请假条
2014/02/08 职场文书
cf收人广告词大全
2014/03/14 职场文书
学习张林森心得体会
2014/09/10 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
Django实现翻页的示例代码
2021/05/24 Python
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis