当前位置：首页 > 网页特效 > 文字效果

Adapttext.js-jQuery响应式文字插件

分类：文字效果日期：2024-05-14 点击(6) 评论(0)

简介

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

```html
<script type="text/javascript" src="js/gauge.min.js"></script>               
```   
#####  不依赖jQuery
adapttext.js可以不依赖于jQuery而单独使用，例如：

```html
<div id="mybox">
    <span>This is an example test...</span>
</div>
```
添加样式：

```html
#mybox {
    width: 50%;
    height: 30%;
}
```
初始化插件：

```html
var el = document.getElementById('mybox');
var adapt = new AdaptText(el); 
```                 
#####  作为jQuery插件使用
adapttext.js也可以作为jQuery插件来使用。例如：
```html

$('.mybox').adaptText(options);  
```
如果在稍后需要用到adapttext.js的实例对象，可以如下操作：

```html
var instance = $('.mybox').data('adaptText');
instance.destroy(); 
```                 
#####  配置参数

------------

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

```html
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()：强制重新计算当前的字体大小。

web299.com

Adapttext.js-jQuery响应式文字插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果