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利用Array.splice实现Array的insert/remove
Jan 13 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
详解vuex状态管理模式
Nov 01 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
js对象数组按属性快速排序
2011/01/31 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
详解React 条件渲染
2020/07/08 Javascript
python自动裁剪图像代码分享
2017/11/25 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python多线程抽象编程模型详解
2019/03/20 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
毕业研究生的自我鉴定
2013/11/30 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
九年级语文教学反思
2014/02/04 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
劳模事迹材料范文
2014/12/24 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers