文本/链接

Adapttext - jQuery响应式文字插件

阿里云


adapttext.js 是一款简单实用的 jQuery 响应式文字插件。该插件通过计算文本的 font-size 来使文字适应它的父容器的宽度和高度。

使用方法:

在页面中引入 adapttext.js 文件。

也想出现在这里?联系我们
创客主机
  1. <script type="text/javascript" src="js/gauge.min.js"></script>

不依赖 jQuery,adapttext.js 可以不依赖于 jQuery 而单独使用,例如:

  1. <div id="mybox">
  2.     <span>This is an example test...</span>
  3. </div>

添加样式:

  1. #mybox {
  2.     width: 50%;
  3.     height: 30%;
  4. }

初始化插件:

  1. var el = document.getElementById('mybox');
  2. var adapt = new AdaptText(el);

作为 jQuery 插件使用,adapttext.js 也可以作为 jQuery 插件来使用。例如:

  1. $('.mybox').adaptText(options);

如果在稍后需要用到 adapttext.js 的实例对象,可以如下操作:

  1. var instance = $('.mybox').data('adaptText');
  2. instance.destroy();

配置参数:

adapttext.js 响应式字体插件的配置参数有:

  1. new AdaptText(el, {
  2.     minFontSize: 10, //define in px the minimum font size possible
  3.     maxFontSize: 200, //define in px the maximum font size possible
  4.     tollerance: 10, //define a number of px of allowed exceed
  5.     callback: function(newpx) {
  6.         //this callback is called everytime a new font size is set
  7.         //the first argument is the new font-size px value
  8.     }
  9. });

minFontSize:最小的字体大小,单位像素

maxFontSize:最大的字体大小,单位像素

tollerance:定义可以超出的像素范围

callback:回调函数

方法:

adapttext.js 响应式字体插件的可用方法有:

.destroy():移除对窗口缩放事件的监听

.elaborate():强制重新计算当前的字体大小

adapttext.js 响应式字体插件的 github 地址为:https://github.com/luruke/adapttext.js

Adapttext - jQuery 响应式文字插件

已有 393 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!