JQuery 改變頁面字體大小的實現(xiàn)代碼(實時改變網(wǎng)頁字體大小)
更新時間:2012年03月05日 17:15:00 作者:
分別定義三個class為increaseFont、decreaseFont、resetFont 的元素。為其click事件添加事件
復制代碼 代碼如下:
/*
對頁面上的字體增大、縮小、恢復原始大小
需要在html頁面中定義三個元素
元素的class分別為 resetFont、increaseFont、decreaseFont
在本文件的JQuery事件中分別定義了三個元素的click事件來實現(xiàn)增大、縮小、恢復原始大小
*/
$(function () {
//取得字體大小,在html標記下定義了font-size
var originalFontSize = $("html").css("font-size");
//恢復默認字體大小
$(".resetFont").click(function () {
$("html").css("font-size", originalFontSize);
//JavaScript不向下執(zhí)行
return false;
});
//加大字體,某個元素的class定義為increaseFont
$(".increaseFont").click(function () {
//取得當前字體大小 后綴px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得當前字體大小,parseFloat()轉(zhuǎn)為float類型去除后綴
var currentFontSizeNumber = parseFloat(currentFontSize);
//新定義的字體大小
var newFontSize = currentFontSizeNumber * 1.1;
//重寫樣式表
$("html").css("font-size", newFontSize);
//JavaScript不向下執(zhí)行
return false;
});
//減小字體,某個元素的class定義為decreaseFont
$(".decreaseFont").click(function () {
//取得當前字體大小 后綴px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得當前字體大小,parseFloat()轉(zhuǎn)為float類型去除后綴
var currentFontSizeNumber = parseFloat(currentFontSize);
//重新定義字體大小
var newFontSize = currentFontSizeNumber * 0.9;
//重寫樣式表
$("html").css("font-size", newFontSize);
//JavaScript不向下執(zhí)行
return false;
});
});
實時改變網(wǎng)頁字體大小,jQuery版
適時改變網(wǎng)頁字體大小,引入了jQuery,并且對字體最大能放大的位數(shù)或最小能縮小的倍數(shù)加了限制,避免一些無意義的功能,當字體小到規(guī)定值時,再次點擊縮小功能已經(jīng)不起作用,這樣做似乎更加人性化。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
jquery判斷RadioButtonList和RadioButton中是否有選中項示例
用jquery判斷RadioButtonList和RadioButton中是否有選中項,下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09
JQuery插件Quicksand實現(xiàn)超炫的動畫洗牌效果
Quicksand這是一個非常不錯的 jQuery 插件,用于實現(xiàn)動畫洗牌效果,十分的實用,有需要的小伙伴可以參考下。2015-05-05
jquery實現(xiàn)彈窗(系統(tǒng)提示框)效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)彈窗系統(tǒng)提示框效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-12-12
原生Ajax 和jQuery Ajax的區(qū)別示例分析
這篇文章主要介紹了原生Ajax 和Jq Ajax的區(qū)別示例分析,需要的朋友可以參考下2014-12-12
jquery導航制件jquery鼠標經(jīng)過變色效果示例
這篇文章主要介紹了jquery鼠標經(jīng)過變色效果代碼,大家參考使用吧2013-12-12

