仿百度换肤功能的简单实例代码


Posted in Javascript onJuly 11, 2016

效果:(换肤出来一个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});
  });
});

效果图:

仿百度换肤功能的简单实例代码

仿百度换肤功能的简单实例代码

以上这篇仿百度换肤功能的简单实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 #Javascript
全面理解闭包机制
Jul 11 #Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 #Javascript
利用css+原生js制作简单的钟表
Apr 07 #Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 #Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 #Javascript
js重写方法的简单实现
Jul 10 #Javascript
You might like
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
读jQuery之十 事件模块概述
2011/06/27 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python类属性与实例属性用法分析
2015/05/09 Python
简述Python中的进程、线程、协程
2016/03/18 Python
python绘制漏斗图步骤详解
2019/03/04 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Python进度条的制作代码实例
2019/08/31 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
寒假实习自荐信
2014/01/26 职场文书
士力架广告词
2014/03/20 职场文书
教研活动总结
2014/04/28 职场文书
建议书的格式
2014/05/12 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
4s店活动策划方案
2014/08/25 职场文书
财务经理岗位职责
2015/01/31 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书