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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
javascript 新浪背投广告实现代码
Jul 07 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
js前端图片加载异常兜底方案
Jun 21 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 如何利用phpexcel导入数据库
2013/08/24 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
js里的prototype使用示例
2010/11/19 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Python饼状图的绘制实例
2019/01/15 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
施工班组长岗位职责
2014/01/05 职场文书
万年牢教学反思
2014/02/15 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
研讨会主持词
2014/04/02 职场文书
门面房租房协议书
2014/12/01 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
部分武汉产收音机展览
2022/04/07 无线电