jQuery实现切换字体大小的方法
更新时间:2015年03月10日 11:40:41 作者:鉴客
这篇文章主要介绍了jQuery实现切换字体大小的方法,实例分析了jQuery操作字体css样式的技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现切换字体大小的方法。分享给大家供大家参考。具体实现方法如下:
复制代码 代码如下:
$.fn.switchSize = function(settings) {
// defaults settings
settings = $.extend({
container: 'body',
arrSizeClass: ['small', 'medium', 'large'],
defaultClass: 'medium',
saveCookie: true
}, settings);
var $container = $(settings.container);
return this
.each(function() {
if ($.cookie('switchSize')) {
$container.addClass($.cookie('switchSize'));
$(this).data("current", $.cookie('switchSize'))
}
})
.bind("click", function() {
var pos;
if ($(this).data("current")) {
pos = jQuery.inArray($(this).data("current"), settings.arrSizeClass);
} else {
pos = jQuery.inArray(settings.defaultClass, settings.arrSizeClass);
}
if (pos >= 0) { //Found Class
if (pos == settings.arrSizeClass.length - 1) { //Check if last
$(this).data("current", settings.arrSizeClass[0]);
} else {
$(this).data("current", settings.arrSizeClass[pos + 1]);
}
} else {
//To prevent error
$(this).data("current", settings.arrSizeClass[0]);
}
$container.removeClass(settings.arrSizeClass[pos]).addClass($(this).data("current"));
if (settings.saveCookie === true) {
$.cookie('switchSize', $(this).data("current"), { expires: 365, path: '/' });
}
});
};
// defaults settings
settings = $.extend({
container: 'body',
arrSizeClass: ['small', 'medium', 'large'],
defaultClass: 'medium',
saveCookie: true
}, settings);
var $container = $(settings.container);
return this
.each(function() {
if ($.cookie('switchSize')) {
$container.addClass($.cookie('switchSize'));
$(this).data("current", $.cookie('switchSize'))
}
})
.bind("click", function() {
var pos;
if ($(this).data("current")) {
pos = jQuery.inArray($(this).data("current"), settings.arrSizeClass);
} else {
pos = jQuery.inArray(settings.defaultClass, settings.arrSizeClass);
}
if (pos >= 0) { //Found Class
if (pos == settings.arrSizeClass.length - 1) { //Check if last
$(this).data("current", settings.arrSizeClass[0]);
} else {
$(this).data("current", settings.arrSizeClass[pos + 1]);
}
} else {
//To prevent error
$(this).data("current", settings.arrSizeClass[0]);
}
$container.removeClass(settings.arrSizeClass[pos]).addClass($(this).data("current"));
if (settings.saveCookie === true) {
$.cookie('switchSize', $(this).data("current"), { expires: 365, path: '/' });
}
});
};
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
这篇文章主要介绍了jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签的相关资料,需要的朋友可以参考下2016-03-03
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部、到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下2014-05-05
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
多行滚动jQuery循环新闻列表代码包括以下功能:鼠标滑上焦点图时停止自动播放/滑出时开始自动播放以及判断执行横向或纵向滚动,感兴趣的朋友可以了解下哦2013-01-01
jquery ajaxfileupload异步上传插件使用详解
这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-02-02


最新评论