jquery设置字体大小插件

当前位置:主页 > jQuery库 > 文本和超链接 > jquery设置字体大小插件
jquery设置字体大小插件
分享:

    插件介绍

    jquery-font-size-event.js是一款jquery设置字体大小插件。通过该jquery插件,你可以动态修改网页中指定区域的字体大小。

    浏览器兼容性

    浏览器兼容性
    时间:2018-01-26
    阅读:
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
简要教程

jquery-font-size-event.js是一款jquery设置字体大小插件。通过该jquery插件,你可以动态修改网页中指定区域的字体大小。

使用方法

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

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery-font-size-event.js"></script>
                
HTML结构

如果你想可以让客户动态的修改页面中的文章主体内容的文字大小,例如你的文章主体放在一个<section>元素中。

<section>
  <p>这里是文章内容...</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
</section>           
                

然后你可以添加一组用于调整字体大小的<radio>元素。

<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设置字体大小插件。

$('.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 );
});
                

该jquery设置字体大小插件的github地址为:https://github.com/FCOO/jquery-font-size-event

下一篇:没有了

网友评论