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

本文实例讲述了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程序设计有所帮助。

时间: 2024-11-16 09:21:33

jQuery实现切换字体大小的方法_jquery的相关文章

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

 这篇文章主要介绍了jQuery实现切换字体大小的方法,实例分析了jQuery操作字体css样式的技巧,需要的朋友可以参考下     本文实例讲述了jQuery实现切换字体大小的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: $.fn.switchSize = function(settings) { // defaults settings settings = $.extend({ container: 'body', arrSizeClass: ['small', 'med

jQuery动态修改字体大小的方法【测试可用】_jquery

本文实例讲述了jQuery动态修改字体大小的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { margin:0; padding:0; } .msg

js简单实现调整网页字体大小的方法_javascript技巧

本文实例讲述了js简单实现调整网页字体大小的方法.分享给大家供大家参考,具体如下: //var tgs = new Array('div','td','tr'); var tgs = new Array('td','tr'); //Specify spectrum of different font sizes: //var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );

网页字体大小设置方法

经常有电脑爱好者朋友由于不小心误操作导致电脑浏览网页时出现了字体变大或变小等,导致使用不习惯.今天编辑与大家简单介绍下网页字体大小怎么设置. 步骤方法 1.其实很多朋友出现网页字体变大或变小都是错误的调整到了网页的缩放比例导致的,正常网页缩放比例是100%,在浏览网页的最右下角可以看到缩放的比例,如果是比例设置不正常,那么网页字体肯定显示不是正常大小了,如下图: 2.如上图所看到的就是正常情况下网页所显示的100%缩放网页字体显示大小,如果调节成75%字体就会变的小了不少,如下图:75%缩放网页

win7系统网页字体大小设置方法

  win7系统网页字体大小设置方法 1.其实很多朋友出现网页字体变大或变小都是错误的调整到了网页的缩放比例导致的,正常网页缩放比例是100%,在浏览网页的最右下角可以看到缩放的比例,如果是比例设置不正常,那么网页字体肯定显示不是正常大小了,如下图: 2.如上图所看到的就是正常情况下网页所显示的100%缩放网页字体显示大小,如果调节成75%字体就会变的小了不少,如下图:75%缩放网页 字体大小,所以当您发现电脑浏览网页出现字体变大或者变小,首先查看下网页缩放比例是否是100%正常数值,我们可以使

win7修改CMD命令提示符文字字体大小的方法

  很多网友喜欢运行cmd进入dos命令窗口,在dos命令窗口下进行其他操作,但有的网友反应自己眼睛不太好使,再加上显示屏较小,看代码较为费眼吃力,怎样才能把dos命令窗口中的字体变大呢,请看小编怎样处理的. win7修改CMD命令提示符文字字体大小的方法 1.点击开始菜单,在运行中输入cmd后回车,进入dos操作界面. 2.右击上方的标题栏,在弹出的菜单中选择"默认值"进入控制台窗口属性. 3.选择字体选项卡,在右方的"大小(S)"界面中选择较大的即可,当然也可以

Android TextView 设置字体大小的方法_Android

废话不多说了,直接给大家贴代码了,具体代码如下所示: package com.example.yanlei.yl4; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.text.Spannable; import android.text.style.AbsoluteSizeSpan; import and

jquery 文章内容字体大小更换与改变代码

jquery 文章内容字体大小更换与改变代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="javascript教程" src="到jquery官网下载jquery文件.js">&l

Android TextView 设置字体大小的方法

废话不多说了,直接给大家贴代码了,具体代码如下所示: package com.example.yanlei.yl4; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.text.Spannable; import android.text.style.AbsoluteSizeSpan; import and