文本/链接
jquery设置字体大小插件
PetitQ
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>
<p>这里是文章内容...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
</section>
然后你可以添加一组用于调整字体大小的
<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 );
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
