We must have seen the three buttons "big", "medium" and "small" under the title of the article in some large websites to take care of different people's reading habits. Here I would like to introduce this method, and more than their support automatically save Oh ~ Just select once, the next time to read automatically adjust to the favorite font size.
JS Code
First put the following JS into the JS file or script tag:
The code is as follows |
Copy Code |
Jquery.cookie = function (name, value, options) { if (typeof value!= ' undefined ') { options = Options | | {}; if (value = = null) { Value = '; Options.expires =-1; } var expires = '; if (Options.expires && (typeof options.expires = ' number ' | | | options.expires.toUTCString)) { var date; if (typeof options.expires = = ' number ') { Date = new Date (); Date.settime (Date.gettime () + (Options.expires * 24 * 60 * 60 * 1000)); } else { date = Options.expires; } expires = '; Expires= ' + date.toutcstring (); } var path = Options.path? '; Path= ' + options.path: '; var domain = Options.domain? '; Domain= ' + options.domain: '; var secure = options.secure? '; Secure ': '; Document.cookie = [name, ' = ', encodeURIComponent (value), expires, path, domain, Secure].join ('); } else { var cookievalue = null; if (document.cookie && document.cookie!= ") { var cookies = Document.cookie.split (';'); for (var i = 0; i < cookies.length; i++) { var cookie = Jquery.trim (Cookies[i]); if (cookie.substring (0, name.length + 1) = = (name + ' = ')) { Cookievalue = decodeURIComponent (cookie.substring (name.length + 1)); Break } } } return cookievalue; } }; function SetFont (size) { $.cookie (' font_size ', size, {expires:99999999}); $ (". Context"). CSS ("font-size", size);//.context the container for your article }; $ (document). Ready (function () { SetFont ($.cookie (' font_size ') + ' px '); }); |
Pay attention to replacing the. Context of your code with the content container of your article.
Html Code
Then invoke the following code where needed:
The code is as follows |
Copy Code |
<a href= "Javascript:setfont" > Big </a> <a href= "Javascript:setfont" > </a> <a href= "Javascript:setfont" > Small </a>
|
You can customize the font size and text in the SetFont () function.