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 相关文章推荐
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
简单实现js倒计时功能
Feb 13 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
js实现3D照片墙效果
Oct 28 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
html5调用摄像头截图功能
Jan 18 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
Js获取事件对象代码
2010/08/05 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
机电专业个人求职信范文
2013/12/30 职场文书
入职担保书范文
2014/05/21 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
暑期培训班策划方案
2014/08/26 职场文书
营销计划书
2015/01/17 职场文书
绵山导游词
2015/02/05 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书