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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现切换字体大小的方法

    本文实例讲述了jQuery实现切换字体大小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $.fn.switchSize = function(settings) { // defaults settings settings = $.extend({     container: 'body',     arrSizeClass: ['small', 'medium', 'large'],     defaultClass: 'medium',     saveCook

  • jQuery在页面加载时动态修改图片尺寸的方法

    本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法.分享给大家供大家参考.具体如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(

  • jquery更换文章内容与改变字体大小代码

    复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="javascript教程" src="到jquery官网下载jquery文件.js"></script>

  • jquery实现实时改变网页字体大小、字体背景色和颜色的方法

    jquery实现实时改变网页字体大小、字体背景色和颜色的方法

    本文实例讲述了jquery实现实时改变网页字体大小.字体背景色和颜色的方法.分享给大家供大家参考.具体如下: 这里使用jquery实时改变字体大小.字体背景色和颜色,JQUERY让很多事变得更简单,确实是个实用的小插件,对JQ不熟悉的朋友,平时可要多看一些实例啦,比如现在这一个小实例,你可以从中学习到不少知识点的哦. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  • jQuery动态修改字体大小的方法【测试可用】

    jQuery动态修改字体大小的方法【测试可用】

    本文实例讲述了jQuery动态修改字体大小的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { margin:0; padding:0; } .msg

  • ASP.NET jQuery 实例10 动态修改hyperlink的URL值

    ASP.NET jQuery 实例10 动态修改hyperlink的URL值

    1.先准备界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="left"> <fieldset style="width: 300px; height: 200px;"> <table cellpadding="0" cellspacing="0" border="

  • JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

    复制代码 代码如下: /* 对页面上的字体增大.缩小.恢复原始大小 需要在html页面中定义三个元素 元素的class分别为 resetFont.increaseFont.decreaseFont 在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大.缩小.恢复原始大小 */ $(function () { //取得字体大小,在html标记下定义了font-size var originalFontSize = $("html").css("font-si

  • jQuery之字体大小的设置方法

    先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素.arrayObject.slice(start,end).start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推. end   可选.规定从何处结束选取.该参数是数组片断结束处的数组下标.如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素.如果这个参数是负数,那么它规定的是从数组

  • jQuery动态修改超链接地址的方法

    本文实例讲述了jQuery动态修改超链接地址的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: <a id="jb51" href="http://www.haotu.net">好图网</a> 通过jQuery更换此超级链接的链接地址为http://www.jb51.net,代码如下: $("button").click(function(){ $("#jb51").attr(&quo

  • jQuery动态改变图片显示大小(修改版)的实现思路及代码

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此功能的jQuery代码如下.这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等. 原始代码: 复制代码 代码如下: $(document).ready(function() {     $('.post img').each(function() {     var maxWidth = 100; /

随机推荐