当前位置：首页 > 网页特效 > 其他

jquery设置字体大小插件

分类：其他日期：2024-05-14 点击(1) 评论(0)

jquery设置字体大小插件

简介

在页面中引入jquery和jquery-font-size-event.js。

```html
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery-font-size-event.js"></script>
```
#####  HTML结构
如果你想可以让客户动态的修改页面中的文章主体内容的文字大小，例如你的文章主体放在一个section元素中。

```html
<section>
  <p>这里是文章内容...</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
</section> 
```          
然后你可以添加一组用于调整字体大小的radio元素。

```html
<div>
<p>请选择字体大小：</p>
<input type="radio" class="scaleRadio" name="options" value="60" autocomplete="off"><label for="option1">60%</label>
<input type="radio" class="scaleRadio" name="options" value="80" autocomplete="off"><label for="option2">80%</label>
<input type="radio" class="scaleRadio" name="options" value="100" autocomplete="off" checked><label for="option3">100%</label>
<input type="radio" class="scaleRadio" name="options" value="120" autocomplete="off"><label for="option4">120%</label>
<input type="radio" class="scaleRadio" name="options" value="150" autocomplete="off"><label for="option5">150%</label>
<input type="radio" class="scaleRadio" name="options" value="300" autocomplete="off"><label for="option6">300%</label>
</div>     
```
#####  初始化插件
在页面DOM元素加载完毕之后，通过通过下面的方法来初始化该jquery设置字体大小插件。

```html
$('.scaleRadio').on( 'change', function(event) {
    var percent = 16*parseInt($(event.target).attr('value'))/100;
    $('section').css('font-size', percent+'px');
});
$.onFontSizeChanged( function( e, fontSize ){
    console.log('fontSize=', fontSize );
});
```

web299.com

jquery设置字体大小插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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