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


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图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
使用javascript插入样式
Mar 14 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
webpack4.0 入门实践教程
Oct 08 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
3
2006/10/09 PHP
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
毕业生找工作的自我评价
2013/10/18 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
小学教学工作总结2015
2015/05/13 职场文书
主持稿开场白
2015/06/01 职场文书
追悼词范文大全
2015/06/23 职场文书
python基础之停用词过滤详解
2021/04/21 Python
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android