jQuery插件FontSizer实现Javascript自定义动态调整网页文字大小

网页有时需要自定义动态调整网页文字大小,常见的形式如调整网页文字大小,分为小,中,大三种字体形式,功能非常简单,但如果使用jQuery插件 FontSizer实现Javascript自定义动态调整网页文字大小只需要一行代码,轻松实现任何大小字体比例变化,实例效果图如下:

使用说明
需要使用jQuery库文件JQuery FontSizer库文件

素材准备
可定义CSS样式文字,用于提示字体显示友好,设置Javascript自定义动态调整网页文字小,中,大三个字体的样式

实例代码(代码下载见下面)
一,包含文件部分

  1. <script language="javascript" src="js/jquery.js"></script>
  2. <script language="javascript" src="js/fontsizer.jquery.js"></script>

二,HTML部分

  1. <div class="fontResizer">
  2. <a href="#" class="smallFont">A</a><a href="#" class="medFont">A</a><a href="#" class="largeFont">A</a>
  3. </div>

提示部分,提示用户使用的字体动态调整选择,如:小A,中A,大A。

三,Javascript部分(jQuery插件FontSizer调用)

  1. <script language="javascript">
  2. $(document).ready(function() {
  3. fontResizer('10px','11px','12px');
  4. });
  5. </script>

其中fontResizer('10px','11px','12px') 分别设置小,中,大字体的大小,jQuery插件FontSizer使用非常简单,jQuery插件FontSizer实现Javascript自定义动 态调整网页文字大小可实现用户自定义字体大小的有效期为7天,同时使用中要注意各种大小字体的样式,实现每种字体样式调整的效果。供参考。

共有0个回答