adapttext.js 是一款简单实用的 jQuery 响应式文字插件。该插件通过计算文本的 font-size 来使文字适应它的父容器的宽度和高度。
在页面中引入 adapttext.js 文件。
<script type="text/javascript" src="js/gauge.min.js"></script>
不依赖 jQuery,adapttext.js 可以不依赖于 jQuery 而单独使用,例如:
<div id="mybox">
<span>This is an example test...</span>
</div>
#mybox {
width: 50%;
height: 30%;
}
var el = document.getElementById('mybox');
var adapt = new AdaptText(el);
作为 jQuery 插件使用,adapttext.js 也可以作为 jQuery 插件来使用。例如:
$('.mybox').adaptText(options);
如果在稍后需要用到 adapttext.js 的实例对象,可以如下操作:
var instance = $('.mybox').data('adaptText');
instance.destroy();
adapttext.js 响应式字体插件的配置参数有:
new AdaptText(el, {
minFontSize: 10, //define in px the minimum font size possible
maxFontSize: 200, //define in px the maximum font size possible
tollerance: 10, //define a number of px of allowed exceed
callback: function(newpx) {
//this callback is called everytime a new font size is set
//the first argument is the new font-size px value
}
});
minFontSize:最小的字体大小,单位像素
maxFontSize:最大的字体大小,单位像素
tollerance:定义可以超出的像素范围
callback:回调函数
adapttext.js 响应式字体插件的可用方法有:
.destroy():移除对窗口缩放事件的监听
.elaborate():强制重新计算当前的字体大小
adapttext.js 响应式字体插件的 github 地址为:https://github.com/luruke/adapttext.js
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!