js實現(xiàn)文章文字大小字號功能完整實例
更新時間：2014年11月01日 12:09:10 投稿：shichen2014
這篇文章主要介紹了js實現(xiàn)文章文字大小字號功能的實現(xiàn)方法,可根據(jù)用戶習慣調(diào)整顯示文字的大小.詳細講述了實現(xiàn)這一功能的完整步驟.是非常實用的技巧,需要的朋友可以參考下
本文實例講述了js實現(xiàn)文章文字大小字號功能的方法。分享給大家供大家參考。具體分析如下：
文字大中小是很多網(wǎng)站供用戶閱讀方便的一個功能，本文實例介紹的文字大中小字號功能可以在用戶選擇之后打開只要在同網(wǎng)站打開另一篇文章都會根據(jù)用戶習慣來顯示字體大小。
大家一定在某些大型網(wǎng)站看到過文章標題下三個按鈕 “大”、“中”、“小”，用來照顧不同人的閱讀習慣。這里我就要介紹這種方法，而且比它們的還支持自動保存哦~只要選擇一次，下次閱讀自動調(diào)整到喜歡的字號。
JS 代碼部分：
首先把下邊的 JS 放到 JS 文件或者 script 標簽里：
復制代碼 代碼如下:
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 換成你文章內(nèi)容的容器
};
$(document).ready(function(){
SetFont( $.cookie('Font_size') + 'px' );
});
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 換成你文章內(nèi)容的容器
};
$(document).ready(function(){
SetFont( $.cookie('Font_size') + 'px' );
});
注意把代碼的 .context 換成你的文章內(nèi)容容器。
Html 代碼部分：
然后在需要的地方調(diào)用下邊的代碼：
復制代碼 代碼如下:
<a href="javascript:SetFont(16)">大</a>
<a href="javascript:SetFont(14)">中</a>
<a href="javascript:SetFont(12)">小</a>
<a href="javascript:SetFont(14)">中</a>
<a href="javascript:SetFont(12)">小</a>
可以自定義 SetFont() 函數(shù)里的字號以及文字。
希望本文所述對大家基于javascript的web程序設(shè)計有所幫助。
相關(guān)文章
JavaScript 保存數(shù)組到Cookie的代碼
大部分的瀏覽器一個網(wǎng)站只支持保存20個Cookie，超過20個Cookie，舊的Cookie會被最新的Cookie代替。那么如果要有超過20個Cookie要保存只能將Cookie存為數(shù)組然后保存到Cookie。2010-04-04
這篇文章主要介紹了如何用JavaScript檢測當前瀏覽器是無頭瀏覽器，對無頭瀏覽器感興趣的同學，可以參考一下2021-04-04
js實現(xiàn)綠白相間豎向網(wǎng)頁百葉窗動畫切換效果
這篇文章主要介紹了js實現(xiàn)綠白相間豎向網(wǎng)頁百葉窗動畫切換效果,實例分析了javascript實現(xiàn)百葉窗動畫效果的技巧,需要的朋友可以參考下2015-03-03![js中[]、{}、()區(qū)別示例淺析](http://img.jbzj.com/images/xgimg/bcimg3.png)
很多人都知道在js中[]表示的是數(shù)組對象,{}表示的是對象,但是這兩者的區(qū)別卻說不出來,下面這篇文章主要給大家介紹了關(guān)于js中[]、{}、()區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-06-06
微信小程序開發(fā)之實現(xiàn)選項卡(窗口頂部TabBar)頁面切換
本篇文章主要介紹了微信小程序開發(fā)之選項卡(窗口頂部TabBar)頁面切換，具有一定的參考價值，有需要的可以了解一下。2016-11-11
詳解JS: reduce方法實現(xiàn) webpack多文件入口
本篇文章主要介紹了詳解JS: reduce方法實現(xiàn) webpack多文件入口，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了微信小程序獲取手機系統(tǒng)信息的方法,涉及微信小程序wx.getSystemInfo函數(shù)的簡單使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了微信小程序上傳多圖到服務器并獲取返回的路徑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
javascript設(shè)計模式 – 裝飾模式原理與應用實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 裝飾模式,結(jié)合實例形式分析了javascript裝飾模式基本概念、原理、應用場景及操作注意事項,需要的朋友可以參考下2020-04-04
js數(shù)據(jù)類型轉(zhuǎn)換與流程控制操作實例分析
這篇文章主要介紹了js數(shù)據(jù)類型轉(zhuǎn)換與流程控制操作,結(jié)合實例形式分析了JavaScript數(shù)據(jù)類型轉(zhuǎn)換與流程控制相關(guān)原理、操作技巧與使用注意事項,需要的朋友可以參考下2019-12-12