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 相关文章推荐
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
详解php命令注入攻击
2019/04/06 PHP
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python中函数传参详解
2016/07/03 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
wxPython实现分隔窗口
2019/11/19 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Python实现上下文管理器的方法
2020/08/07 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
医院党员公开承诺书
2014/08/30 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
师德师风个人总结
2015/02/06 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
python绘制云雨图raincloud plot
2022/08/05 Python