jQuery实现切换字体大小的方法


Posted in Javascript onMarch 10, 2015

本文实例讲述了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: '/' });

        }

    });

};

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
JS的get和set使用示例
Feb 20 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
jQuery实现3D文字特效的方法
Mar 10 #Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 #Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 #Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 #Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 #Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 #Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 #Javascript
You might like
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php删除数组元素示例分享
2014/02/17 PHP
js日期相关函数总结分享
2013/10/15 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
python使用分治法实现求解最大值的方法
2015/05/12 Python
python发送邮件功能实现代码
2016/07/15 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python 爬虫的原理
2020/07/30 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
yy司仪主持词
2014/03/22 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
在职证明范本
2015/06/15 职场文书
团队拓展训练感想
2015/08/07 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
小学记事作文之200字
2019/08/06 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers