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 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
php 魔术方法使用说明
2009/10/20 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
机修工岗位职责
2013/11/24 职场文书
出纳岗位职责模板
2013/11/27 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
2015年党建工作总结
2015/03/30 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
基于Python实现西西成语接龙小助手
2022/08/05 Golang