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


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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
Vue底层实现原理总结
Feb 17 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
vue实现选中效果
2020/10/07 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python模拟Django框架实例
2016/05/17 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python 加密的实例详解
2017/10/09 Python
python随机取list中的元素方法
2018/04/08 Python
python实现泊松图像融合
2018/07/26 Python
python爬取指定微信公众号文章
2018/12/20 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
python中数据库like模糊查询方式
2020/03/02 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
办理居住证介绍信
2014/01/15 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
体育教师个人工作总结
2015/02/09 职场文书
2015年环卫工作总结
2015/04/28 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript