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 相关文章推荐
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
动易数据转成dedecms的php程序
2007/04/07 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
拖动一个HTML元素
2006/12/22 Javascript
xtree.js 代码
2007/03/13 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
再探JavaScript作用域
2014/09/24 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
Python-openCV开运算实例
2020/07/05 Python
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
Ajax的工作原理
2015/12/04 面试题
学校实习推荐信
2015/03/27 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
Javascript webpack动态import
2022/04/19 Javascript