jQuery基础学习之---cookie换肤
来源:互联网 发布:香港网络专线 编辑:程序博客网 时间:2024/05/18 10:06
jQuery基础学习之---cookie换肤
记得在刚刚基础js的时候写过一个原生的cookie换肤效果,但是使用起来不是很方便,所以闲时变用jQuery自己封装了一个换肤效果。其原理和原生的js一样,都是通过cookie进行效果的展示。
本文存在的问题:操作cookie时,只能通过document么?JQuery有没有类似的方法?
希望:得到大虾的指点,也希望能给和我一样的菜鸟一定的帮助。
努力一点,生活更美好……
点击预览效果:http://sandbox.runjs.cn/show/dgajytiu
源代码如下:
html:
<div class="container"> <img src="images/a.jpg"> <img src="images/b.jpg"> <img src="images/c.jpg"> </div>css:
*{margin:0;padding:0}body{position:relative;background-image:url(../images/a.jpg)}.container{position:absolute;top:50px;right:50px;display:inline-table;height:50px}.container>img{width:48px;height:48px;border:2px solid #2e3a1f;border-radius:50%;cursor:pointer}
js:
$(function(){$.fn.ChangeSkin = function(){var that = $(this), $Img = that.find('img'), $goal = $('body'),//换背景的目标 Src = '', Name = 'XXYY',//cookie名称 Day = 30,//cookie时间 Cookie = {set:function(name,val,day){//新建cookievar path = new Date();path.setTime(path.getTime()+day*24*60*1000);document.cookie = name + '=' + escape(val) + ';expires=' + path.toGMTString();},get:function(name){//获取cookievar arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");//正则表达式 arr = document.cookie.match(reg);//match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。 if(arr){ return (arr[2]); } //等价于if(arr = document.cookie.match(reg);) } };if(Cookie.get(Name)){$goal.css({backgroundImage:'url('+Cookie.get(Name)+')'})}$Img.click(function(){Src = $(this).attr('src');$goal.css({backgroundImage:'url('+Src+')'})Cookie.set(Name,Src,Day);});}$(".container").ChangeSkin();});
0 0
- jQuery基础学习之---cookie换肤
- jQuery之换肤与cookie插件
- jquery 用cookie进行换肤
- Jquery给frameset换肤,cookie动态加载css
- 利用jquery cookie实现的简单换肤功能
- jQuery实现换肤功能(使用cookie记录)
- jQuery实现换肤功能(使用cookie.js插件)
- JS网页换肤读取cookie基础案例
- 网页换肤,模块换肤,jQuery的Cookie插件使用
- 带你学习JQuery:网页换肤
- 5.3.3: jQuery之网页换肤
- 传智播客学习之Jquery基础
- 传智播客学习之Jquery基础
- jquery学习之基础核心
- Jquery基础学习之-入门
- jquery基础学习之--选择器
- jquery基础学习之事件
- jquery基础之学习笔记
- Android 代码命名规范 -- 提高代码可以读性
- strcpy与strcpy_s的问题
- List接口、Set接口和Map接口
- MFC窗口和控件大小等比例变化
- libxml2使用
- jQuery基础学习之---cookie换肤
- Search in Rotated Sorted Array I && II
- android中打印函数调用栈、内存使用、屏幕分辨率
- 我的游戏开发收藏夹
- android Intent返回数据,回调数据,startActivityForResult用法
- HDU2059 龟兔赛跑 动态规划 DP
- ArcGIS API for WPF之最短路径分析.doc
- 学习python的一些代码
- 车牌识别