JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)


复制代码 代码如下:

/*
对页面上的字体增大、缩小、恢复原始大小
需要在html页面中定义三个元素
元素的class分别为 resetFont、increaseFont、decreaseFont
在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大、缩小、恢复原始大小
*/
$(function () {
//取得字体大小,在html标记下定义了font-size
var originalFontSize = $("html").css("font-size");
//恢复默认字体大小
$(".resetFont").click(function () {
$("html").css("font-size", originalFontSize);
//JavaScript不向下执行
return false;
});

//加大字体,某个元素的class定义为increaseFont
$(".increaseFont").click(function () {
//取得当前字体大小 后缀px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得当前字体大小,parseFloat()转为float类型去除后缀
var currentFontSizeNumber = parseFloat(currentFontSize);
//新定义的字体大小
var newFontSize = currentFontSizeNumber * 1.1;
//重写样式表
$("html").css("font-size", newFontSize);
//JavaScript不向下执行
return false;
});

//减小字体,某个元素的class定义为decreaseFont
$(".decreaseFont").click(function () {
//取得当前字体大小 后缀px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得当前字体大小,parseFloat()转为float类型去除后缀
var currentFontSizeNumber = parseFloat(currentFontSize);
//重新定义字体大小
var newFontSize = currentFontSizeNumber * 0.9;
//重写样式表
$("html").css("font-size", newFontSize);
//JavaScript不向下执行
return false;
});
});

实时改变网页字体大小,jQuery版
适时改变网页字体大小,引入了jQuery,并且对字体最大能放大的位数或最小能缩小的倍数加了限制,避免一些无意义的功能,当字体小到规定值时,再次点击缩小功能已经不起作用,这样做似乎更加人性化。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]



相关阅读:
较为全面的asp防CC攻击代码分享
解决网站phpmyadmin无法导入大数据库的方法
10个步骤有效的保护IIS Web服务器
用vbs确定计算机是否有 USB 2.0 端口的代码
W3C教程(12):W3C Soap 活动
DEDECMS 支付宝操作手册
删除Mysql的MySql-bin.0000X日志文件的方法
js分页显示div的内容
HTML服务器控件介绍:HtmlGeneric控件
Web服务器解决方案(一)
用javascript实现页内搜索的脚本代码
w3c技术架构介绍
Ms WORD和ACCESS的数据交换
揭开Oracle 10G手工创建数据库的神秘面纱
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4