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的简单实现折叠菜单代码
Sep 15 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
vue的列表交错过渡实现代码示例
May 05 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与MySQL交互使用详解
2006/10/09 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现360的字符显示界面
2014/02/21 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python复制文件到指定目录的实例
2018/04/27 Python
numpy中矩阵合并的实例
2018/06/15 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
无刑事犯罪记录证明范本
2014/09/29 职场文书
感谢信模板大全
2015/01/23 职场文书
入党介绍人考察意见
2015/06/01 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
MySQL锁机制
2021/04/05 MySQL
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript