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


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 相关文章推荐
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
node.js中的require使用详解
Dec 15 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
vue基础知识--axios合并请求和slot
Jun 04 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
德生S2000电路分析
2021/03/02 无线电
PHP Token(令牌)设计
2008/03/15 PHP
PHP面向对象分析设计的经验原则
2008/09/20 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
python常用排序算法的实现代码
2019/11/08 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
局域网定义和特性
2016/01/23 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
行政总经理岗位职责
2013/12/05 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
优秀团队申报材料
2014/12/26 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers