jquery字体大小点击切换保存cookie

Posted by baicai on May 18, 2017
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery字体大小点击切换保存cookie支持大中小字体大小切换</title>
<meta name="description" content="jquery字体大小点击切换网页文本内容字号大中小改变且保存cookie,用户下次打开为之前最后设置状态" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
function fontResizer(smallFont,medFont,largeFont){
	
	function clearSelected(){
		$(".smallFont").removeClass("curFont");
		$(".medFont").removeClass("curFont");
		$(".largeFont").removeClass("curFont");
	}
	
	function saveState(curSize){
		var date = new Date();
		date.setTime(date.getTime()+(7*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
		document.cookie = "fontSizer"+"="+curSize+expires+"; path=/";
	}

	$(".smallFont").click(function(){
		$('.fontsizebox').css('font-size', smallFont);
		clearSelected();
		$(".smallFont").addClass("curFont");
		saveState(smallFont);
	});

	$(".medFont").click(function(){
		$('.fontsizebox').css('font-size', medFont);
		clearSelected();
		$(".medFont").addClass("curFont");
		saveState(medFont);
	});

	$(".largeFont").click(function(){
		$('.fontsizebox').css('font-size', largeFont);
		clearSelected();
		$(".largeFont").addClass("curFont");
		saveState(largeFont);
	});

	function getCookie(c_name){
		if(document.cookie.length>0){
			c_start=document.cookie.indexOf(c_name + "=");
			if (c_start!=-1){
				c_start=c_start + c_name.length+1;
				c_end=document.cookie.indexOf(";",c_start); 
				if(c_end==-1)c_end=document.cookie.length;
				return unescape(document.cookie.substring(c_start,c_end));
			}
		} 
		return "";
	}

	var savedSize = getCookie('fontSizer');

	if(savedSize!=""){
		$('.fontsizebox').css('font-size', savedSize);
		switch(savedSize){
			case smallFont: $(".smallFont").addClass("curFont");
			break;
			case medFont: $(".medFont").addClass("curFont");
			break;
			case largeFont: $(".largeFont").addClass("curFont");
			break;
			default: $(".medFont").addClass("curFont");
		}
	}else {
		$('.fontsizebox').css('font-size', medFont);
		$(".medFont").addClass("curFont");
	}
	
}
</script>

<script type="text/javascript">
$(document).ready(function() {
	fontResizer('12px','16px','22px');
});
</script>
</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-size:12px;}
.fontbox{width:800px;margin:0 auto;}
.fontbox h1,.fontbox h2{margin:10px 0;}
/* fontsizebox */
.fontsizebox p{line-height:22px;margin:20px 0 0 0;text-indent:2em;}
/* fontResizer */
.fontResizer{margin:10px 0;height:24px;}
.fontResizer a{display:block;float:left;width:17px;height:17px;text-align:center;border:1px solid #ccc;line-height:17px;color:#666;text-decoration:none;}
.fontResizer a:hover{color:#000;text-decoration:none;}
.smallFont{font-size:10px;}
.medFont{font-size:12px;}
.largeFont{font-size:14px;}
.curFont{background:#EEEEF7;}
</style>


<div class="fontbox">

	<div class="fontResizer">
		<a href="javascript:void(0);" class="smallFont">小</a><a href="javascript:void(0);" class="medFont">中</a><a href="javascript:void(0);" class="largeFont">大</a>
	</div>
	
	<h1>字体大小演示</h1>
	<h2>点击“A”的链接调整字体</h2>
	
	<div class="fontsizebox">
		<p>字体SIZER允许用户动态地增加或减少任何与“EM”指定的字体大小的文件的字体大小。字体应保持不变的应该是“PX”单位的大小。</p>
		<p>欢迎到这里,在这里,这里。添加评论你。这个怎么样,这里更重要的是,任何网站。欢迎你。她是大山,我的同志在调查和解决安全问题。但是,你更多地使用它。越来越多,但在这里我所关注的。我现在在这里喝。你可以添加更多的图片,房地产,或更多,但在这里,现在。我们发表了一份免费的,这里是在同一时间,在最前。我们进行更多的。但在这里,也不会做这一些,更多的领域是相同的。我们在这里左右。你知道,这里还有一个门,有更公正的,该名称是必需的。我们希望。</p>
		<p>你的脚,一个生命,这是不错的,更多的生命,更多。阅读更多的笑声,没有更多的,这里,这里更重要的是。我们模块是之前。我们知道你更多。欢迎更多,经理,但是,和丰富的媒体。欢迎到这里,在这里,这里。如果这个工程的决定。以前是。原价水平。更多。我们没有更多的已经说了。更多。添加您的内容。你就可以获得更多。你将需要更多。添加你的跟踪。这是闪,门被用来装饰你的,但更多的,纯粹的。巨大的代价。目前,我们可以只,有时,您的需求,但更多的,它是。</p>
		<p>首页更纯净的大门。请删除评论。大规模的明天。只添加,柔软不会被发表,饮料,而不是字的评论。请释放它。我们想在这里工作。即将开始的是注释。阅读基地。黑暗的猫,更多的是时间。点击这里。但这里的湖。我们作为前狮子也不是你的产品。在这里阅读更多这里。没有更多承担的耻辱。更担心生活中,我说了脚的自由元素,你的脚需要更多。在越多。在这里选择你的病。更多的调查。更多。
		</p>
	</div>

</div>
</body>
</html>