https://shichigahama.com/assets/js/jquery.fontsizechange.js

1// フォントサイズ切り替え
2
3(function($){
4
5	$(function(){
6		fontsizeChange();
7	});
8
9	function fontsizeChange(){
10
11		//var changeArea = $("#changeArea");			//フォントサイズ変更エリア
12		var changeArea = $(".body");			//フォントサイズ変更エリア
13		var btnArea = $("#fontSize");				//フォントサイズ変更ボタンエリア
14		var changeBtn = btnArea.find(".changeBtn");	//フォントサイズ変更ボタン
15		//var fontSize = [100,116,131];				//フォントサイズ（HTMLと同じ並び順、幾つでもOK、単位は％）
16		// var fontSize = [90,100,125];				//フォントサイズ（HTMLと同じ並び順、幾つでもOK、単位は％）
17		var fontSize = [86.6666666667,100,120];				//フォントサイズ（HTMLと同じ並び順、幾つでもOK、単位は％）
18		var ovStr = "_ov";							//ロールオーバー画像ファイル末尾追加文字列（ロールオーバー画像を使用しない場合は値を空にする）
19		var activeClass = "active";					//フォントサイズ変更ボタンのアクティブ時のクラス名
20		var defaultSize = 1;						//初期フォントサイズ設定（HTMLと同じ並び順で0から数値を設定）
21		var cookieExpires = 7;						//クッキー保存期間
22		var sizeLen = fontSize.length;
23		var useImg = ovStr!="" && changeBtn.is("[src]");
24
25		//現在クッキー確認関数
26		function nowCookie(){
27			return $.cookie("fontsize");
28		}
29
30		//画像切替関数
31		function imgChange(elm1,elm2,str1,str2){
32			elm1.attr("src",elm2.attr("src").replace(new RegExp("^(\.+)"+str1+"(\\.[a-z]+)$"),"$1"+str2+"$2"));
33		}
34
35		//マウスアウト関数
36		function mouseOut(){
37			for(var i=0; i<sizeLen; i++){
38				if(nowCookie()!=fontSize[i]){
39					imgChange(changeBtn.eq(i),changeBtn.eq(i),ovStr,"");
40				}
41			}
42		}
43
44		//フォントサイズ設定関数
45		function sizeChange(){
46			changeArea.css({fontSize:nowCookie()+"%"});
47		}
48
49		//クッキー設定関数
50		function cookieSet(index){
51			$.cookie("fontsize",fontSize[index],{path:'/',expires:cookieExpires});
52		}
53
54		//初期表示
55		if(nowCookie()){
56			for(var i=0; i<sizeLen; i++){
57				if(nowCookie()==fontSize[i]){
58					sizeChange();
59					var elm = changeBtn.eq(i);
60					if(useImg){
61						imgChange(elm,elm,"",ovStr);
62					}
63					elm.addClass(activeClass);
64					break;
65				}
66			}
67		}
68		else {
69			cookieSet(defaultSize);
70			sizeChange();
71			var elm = changeBtn.eq(defaultSize);
72			if(useImg){
73				imgChange(elm,elm,"",ovStr);
74				imgChange($("<img>"),elm,"",ovStr);
75			}
76			elm.addClass(activeClass);
77		}
78
79		//ホバーイベント（画像タイプ）
80		if(useImg){
81			changeBtn.each(function(i){
82				var self = $(this);
83				self.hover(
84				function(){
85					if(nowCookie()!=fontSize[i]){
86						imgChange(self,self,"",ovStr);
87					}
88				},
89				function(){
90					mouseOut();
91				});
92			});
93		}
94
95		//クリックイベント
96		changeBtn.click(function(){
97			var index = changeBtn.index(this);
98			var self = $(this);
99			cookieSet(index);
100			sizeChange();
101			if(useImg){
102				mouseOut();
103			}
104			if(!self.hasClass(activeClass)){
105				changeBtn.not(this).removeClass(activeClass);
106				self.addClass(activeClass);
107			}
108		});
109
110	}
111
112})(jQuery);