https://www.cau.ac.kr/cau2021/type/common/js/fontsize.js

1/*!
2 * jquery fontsize 插件
3 * author: xiaolong
4 * 20170530
5 */
6
7(function ($) {
8
9    function FontSize(dom, options) {
10        var defaultSettings = {
11            step: 2,
12            increaseTimes: 2, // 放大次数
13            reduceTimes: 2, // 缩小次数
14            increaseBtn: '.zoomin',
15            reduceBtn: '.zoomout',
16            clearBtn: '.zoomclear'
17        };
18
19        this.settings = $.extend({}, defaultSettings, options);
20        this.container = dom;
21        // 不需要设置fontsize的标签
22        this.noFontTags = ['svg', 'IMG', 'use', 'BR', 'VIDEO', 'AUDIO', 'STYLE', 'SCRIPT', 'UL', 'OL', 'DL'];
23        this._init();
24        this.$increaseBtn = $(this.settings.increaseBtn);
25        this.$reduceBtn = $(this.settings.reduceBtn);
26        this.$clearBtn = $(this.settings.clearBtn);
27        
28        var that = this;
29        this.$increaseBtn.on('click', function () {
30            if (that.fontIncrease() === false) {
31                that.$increaseBtn.addClass('disable');
32            }
33            that.$reduceBtn.removeClass('disable');
34        });
35
36        this.$reduceBtn.on('click', function () {
37            if (that.fontReduce() === false) {
38                that.$reduceBtn.addClass('disable');
39            }
40            that.$increaseBtn.removeClass('disable');
41        });
42        
43        this.$clearBtn.on('click', function () {
44        	that.clearZoom();
45        });
46    }
47
48    // 为所有元素节点 写上内联样式 font-size。
49    FontSize.prototype._init = function () {
50        this._loopNode(this.container, function () {
51            $(this).css('font-size', $(this).css('font-size'));
52        });
53
54        this.zoom = 0;
55        this.maxZoom = this.settings.step * this.settings.increaseTimes;
56        this.minZoom = -this.settings.step * this.settings.reduceTimes;
57    };
58
59    // 遍历元素节点
60    FontSize.prototype._loopNode = function (node, fn) {
61        var type = node.nodeType,
62            childNodes,
63            noFontTags = this.noFontTags;
64
65        // 元素节点
66        if (type === 1) {
67            childNodes = node.childNodes;
68            if (noFontTags.indexOf(node.nodeName) === -1) {
69                fn && fn.call(node);
70            }
71
72            for (var i = 0, l = childNodes.length; i < l; i++) {
73                this._loopNode(childNodes[i], fn);
74            }
75        }
76    };
77    
78
79    // 放大字体
80    FontSize.prototype.fontIncrease = function (step) {
81        step = step ? step : this.settings.step;
82
83        if (this.zoom >= this.maxZoom) {
84            return false;
85        }
86        if (this.zoom + step > this.maxZoom) {
87            step = this.maxZoom - this.zoom;
88        }
89        this._loopNode(this.container, function () {
90            $(this).css('font-size', $(this).css('font-size').slice(0, -2) - 0 + step + 'px');
91        });
92        this.zoom += step;
93    };
94
95    // 缩小字体
96    FontSize.prototype.fontReduce = function (step) {
97        step = step ? step : this.settings.step;
98
99        if (this.zoom <= this.minZoom) {
100            return false;
101        }
102        if (this.zoom - step < this.minZoom) {
103            step = Math.abs(this.zoom - this.minZoom);
104        }
105        this._loopNode(this.container, function () {
106            $(this).css('font-size', $(this).css('font-size').slice(0, -2) - 0 - step + 'px');
107        });
108        this.zoom -= step;
109    };
110
111    // 字体大小恢复初始状态
112    FontSize.prototype.clearZoom = function () {
113        var zoom = this.zoom;
114        console.log(this.zoom);
115        this._loopNode(this.container, function () {
116            $(this).css('font-size', $(this).css('font-size').slice(0, -2) - 0 - zoom + 'px');
117        });
118        this.zoom = 0;
119    };
120
121    $.fn.FontSize = function (options, param) {
122        if (typeof options == 'string') {
123            var method = $.fn.FontSize.methods[options];
124            if (method) {
125                return method(this, param);
126            }
127        }
128        return this.each(function () {
129            if (!$.data(this, 'FontSize')) {
130                $.data(this, 'FontSize', new FontSize(this, options));
131            }
132        });
133    };
134
135    $.fn.FontSize.methods = {
136        fontIncrease: function (jq, step) {
137            return jq.each(function () {
138                $.data(this, 'FontSize').fontIncrease(step);
139            });
140        },
141        fontReduce: function (jq, step) {
142            return jq.each(function () {
143                $.data(this, 'FontSize').fontReduce(step);
144            });
145        },
146        clearZoom: function (jq) {
147            return jq.each(function () {
148                $.data(this, 'FontSize').clearZoom();
149            });
150        }
151    };
152
153})(jQuery);