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获取随机数函数可自定义最小值最大值
May 08 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 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
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Python装饰器用法实例分析
2019/01/14 Python
PyQt5实现简易计算器
2020/05/30 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
Python flask框架端口失效解决方案
2020/06/04 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
Python日志器使用方法及原理解析
2020/09/27 Python
Java和Javasciprt的区别
2012/09/02 面试题
《孔子游春》教学反思
2014/02/25 职场文书
校园安全标语
2014/06/07 职场文书
歼十出击观后感
2015/06/11 职场文书
结婚司仪主持词
2015/06/29 职场文书