jQuery实现自动调整字体大小的方法


Posted in Javascript onJune 15, 2015

本文实例讲述了jQuery实现自动调整字体大小的方法。分享给大家供大家参考。具体分析如下:

这里使用一个jQuery函数,自动更改元素中的文本的字体大小。

$.fn.fontfit = function(max) {
  var max_size = 18;
  if (typeof(max) == "undefined")
    max = max_size;
  $(this).wrapInner('<div id="fontfit"></div>');
  var dheight = $(this).height();
  var cheight = $("#fontfit").height();
  var fsize = (($(this).css("font-size")).slice(0,-2))*1;
  while(cheight<dheight && fsize<max) {
    fsize+=1;
    $(this).css("font-size",fsize+"px");
    cheight = $("#fontfit").height();
  }
  while(cheight>dheight || fsize>max) {
    fsize-=1;
    $(this).css("font-size",fsize+"px");
    cheight = $("#fontfit").height();
  }
  $("#fontfit").replaceWith($("#fontfit").html());
  return this;
}

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 #Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 #Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 #Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 #Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 #Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 #Javascript
JavaScript中的acos()方法使用详解
Jun 14 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
node获取客户端ip功能简单示例
2019/08/24 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
视觉直观感受若干常用排序算法
2017/04/13 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
在校生自我鉴定
2014/01/23 职场文书
简历里的自我评价
2014/01/31 职场文书
广告词串烧
2014/03/19 职场文书
承诺函格式模板
2015/01/21 职场文书
统计员岗位职责
2015/02/11 职场文书