易賢網(wǎng)網(wǎng)校上線了！
>>>點(diǎn)擊進(jìn)入<<<
網(wǎng)校開(kāi)發(fā)及擁有的課件范圍涉及公務(wù)員、財(cái)會(huì)類、外語(yǔ)類、外貿(mào)類、學(xué)歷類、
職業(yè)資格類、計(jì)算機(jī)類、建筑工程類、等9大類考試的在線網(wǎng)絡(luò)培訓(xùn)輔導(dǎo)。
本文實(shí)例講述了js實(shí)現(xiàn)文章文字大小字號(hào)功能的方法。分享給大家供大家參考。具體分析如下：
文字大中小是很多網(wǎng)站供用戶閱讀方便的一個(gè)功能，本文實(shí)例介紹的文字大中小字號(hào)功能可以在用戶選擇之后打開(kāi)只要在同網(wǎng)站打開(kāi)另一篇文章都會(huì)根據(jù)用戶習(xí)慣來(lái)顯示字體大小。
大家一定在某些大型網(wǎng)站看到過(guò)文章標(biāo)題下三個(gè)按鈕 “大”、“中”、“小”，用來(lái)照顧不同人的閱讀習(xí)慣。這里我就要介紹這種方法，而且比它們的還支持自動(dòng)保存哦~只要選擇一次，下次閱讀自動(dòng)調(diào)整到喜歡的字號(hào)。
JS 代碼部分：
首先把下邊的 JS 放到 JS 文件或者 script 標(biāo)簽里：
代碼如下:
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' );
});
注意把代碼的 .context 換成你的文章內(nèi)容容器。
Html 代碼部分：
然后在需要的地方調(diào)用下邊的代碼：
代碼如下:
<a href="javascript:SetFont(16)">大</a>
<a href="javascript:SetFont(14)">中</a>
<a href="javascript:SetFont(12)">小</a>
可以自定義 SetFont() 函數(shù)里的字號(hào)以及文字。
希望本文所述對(duì)大家基于javascript的web程序設(shè)計(jì)有所幫助。