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 性能优化指南 (1)
May 21 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
vue双向数据绑定知识点总结
Apr 18 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函数
2006/12/06 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
js Math 对象的方法
2013/09/01 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
React 组件间的通信示例
2018/06/14 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
Python装饰器基础详解
2016/03/09 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
python数字类型math库原理解析
2020/03/02 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Python接口测试文件上传实例解析
2020/05/22 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
Python页面加载的等待方式总结
2021/02/28 Python
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
青年文明号复核材料
2014/02/11 职场文书
入党介绍人评语
2014/05/06 职场文书
酒后驾车标语
2014/06/30 职场文书
安全目标责任书
2014/07/22 职场文书
世界地球日活动总结
2015/02/09 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
会议主持词开场白
2015/05/28 职场文书
远程教育培训心得体会
2016/01/09 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android