jQuery制作360换肤

<body><button>换肤</button><div class='box'><ul class='uls'><li><img src="./img/01.jpg" alt=""></li><li><img src="./img/02.jpg" alt=""></li><li><img src="./img/03.jpeg" alt=""></li><li><img src="./img/04.jpg" alt=""></li><li><img src="./img/05.jpg" alt=""></li></ul><span>X</span></div>
</body>

  *{margin: 0;padding: 0;}/* 先让整个页面是个固定的图片 */body{background: url('./img/01.jpg') no-repeat;background-size:cover; }/* 写box盒子的样式，固定定位在顶上 */.box{width: 100%;height: 160px;display: none;position: fixed;top: 0;background: rgba(255, 255, 255, 0.3);}.uls{list-style: none;}.uls li{float: left;width: 210px;height: 130px;margin-left:30px; margin-top:10px;border: 1px solid white;}.uls li img{width: 210px;height: 130px;}.box span{position: absolute;width: 30px;height: 30px;background: white;line-height: 30px;text-align: center;right: 10px;top: 10px;cursor: pointer;}button{width: 80px;height: 30px;border: none;background:skyblue;color: white;font-size: 14px;font-weight: bold;margin-top: 15px;margin-left: 50px;cursor: pointer; }

 $(function(){$('button').click(function(){// 点击按钮box滑动出现$('.box').slideToggle(1000);return false;})$('span').click(function(){// 点击x剥削滑动隐藏$('.box').slideToggle(1000);return false;})$('li').click(function(){// 点击当前的li，当前边框改变颜色，其他边框变成白色// siblings() 方法返回被选元素的所有同级元素。$(this).css('border-color','pink');$(this).siblings('li').css('border-color','white');// 赋值给a当前li下面图片的路径// attr()获取元素属性值var a= $(this).children().attr('src'); // 当前body的图片变为点击li的图片// 大小适应容器，不平铺   $('body').css({'background':'url('+a+') no-repeat','background-size':'cover'});return false;})$(document).click(function(){// 当点击document对象，下滑出现的box就滑动隐藏$('.box').slideUp(1000);return false;})})

jQuery制作360换肤相关推荐

jQuery实现网站换肤
------------写在前面-------------- 第一次写微博,不知道怎么才可以更好的表述自己的观点.毕竟新人,被关注的比较少,所以,也当做自己学习过程的笔记吧. ------------ ...
（源码）VC开发百分百仿360安全卫士界面，可换肤，可缩放
完全模仿360安全卫士的界面,可换肤,可缩放.其中包括360配置界面,360换肤界面360自定义滚动条,360托盘菜单,360新版特性界面等.可以兼容360安全卫士皮肤文件,使用VC开发,未使用除GD ...
自制仿360首页支持拼音输入全模糊搜索和自动换肤
360首页搜索效果如下 1.完成编写的schoolnet校园网主要目录结构如下主要实现支持中文.拼音首字母.拼音全字母的智能搜索和换肤页面效果如下主要核心代码如下 1.head.jsp < ...
jQuery formValidator表单验证插件4.1.0 下载演示文档可换肤代码生成器
更新记录: 2011/6/5 jQuery formValidator 4.1.0 ver 申明: 1.所有DEMO引用jQuery类库的时候,类库后面直接跟了版本号--表示插件支持的最高类库版本号 ...
jquery.cookie中的操作之与换肤
jquery.cookie.js的插件,插件的源代码如下: /*** Cookie plugin** Copyright (c) 2006 Klaus Hartl (stilbuero.de)* Du ...
防仿百度图片背景色php,基于jQuery实现仿百度首页换肤背景图片切换代码_jquery...
不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- html代码: css代码: *{margin:0;padding:0} a{color:#fff; ma ...
Swing制作高仿QQ界面包含主界面、聊天窗口、系统设置窗口|圆角界面|透明|颜色|渲染|换肤
最近几天闲着没事,练习了一下.编写了一个模仿QQ的界面,主要是练习Swing.呵呵,基本上使用到了我博客前面讲的各种技术,在这里跟大家分享了.我们先来看看主界面: 左边的界面是用Swing ...
jstl 模糊比较_用java等语言仿360首页拼音输入全模糊搜索和自动换肤
360首页搜索效果如下 1.完成编写的schoolnet校园网主要目录结构如下主要实现支持中文.拼音首字母.拼音全字母的智能搜索和换肤页面效果如下主要核心代码如下 1.head.jsp 校园网首 ...
jquery 用cookie进行换肤
进行换肤的前提就是必须写好几个css文件,要加载或下载jquery.cookie.js,同时要注意设置cookie的时候和读取cookie的时候是不一样的 ====================== ...

jQuery制作360换肤

jQuery制作360换肤

jQuery制作360换肤相关推荐

最新文章

热门文章