<!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>