jQuery 제어 텍스트 상자가 자동으로 글꼴 채우기 예제 공유를 축소합니다.

小云云
풀어 주다: 2018-01-06 13:20:52
원래의
1581명이 탐색했습니다.

js는 텍스트 상자의 글꼴 채우기를 자동으로 줄이도록 제어합니다. 텍스트 상자의 글꼴이 텍스트 상자의 범위를 초과하면 상자의 글꼴이 자동으로 줄어들어 전체 텍스트 상자를 채웁니다. 이 글은 주로 텍스트 상자의 글꼴 채우기를 자동으로 줄이는 jQuery에 대한 관련 정보를 소개합니다. 도움이 필요한 친구들이 참고하면 도움이 될 것입니다.

Call: resetFontSize($(".title"), 50, 10, 20);//重置字体大小

wordbox: jQuery 객체
maxHeight: 상자의 최대 높이
minSize: 최소 글꼴 크기
maxSize: 최대 글꼴 크기


this.resetFontSize=function (wordbox, maxHeight, minSize, maxSize) { 
    //  var wordbox = $(".products .title"); 
    //最大高度 
    //var maxHeight = 30; 
    //初始化文字大小为最小 
    wordbox.css('font-size', minSize + "px"); 
    maxSize++; 
    wordbox.each(function () { 
      //循环修改大小直至大于最大高度 
      for (var i = minSize; i < maxSize; i++) { 
        if ($(this).height() > maxHeight) { 
          //当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。 
          $(this).css(&#39;font-size&#39;, (i - 2) + &#39;px&#39;); 
          //结束循环 
          break; 
        } else { 
          //如果小于最大高度,文字大小加1继续尝试 
          $(this).css(&#39;font-size&#39;, i + &#39;px&#39;); 
        } 
      } 
    }); 
  };
로그인 후 복사

관련 권장 사항:

만드는 방법 jQuery를 사용한 클릭 드롭다운 상자 값이 텍스트 상자에 누적됩니다

클릭 드롭다운 상자의 값을 텍스트 상자에 추가하는 방법을 jQuery에서 어떻게 구현하는지 설명하는 예

JavaScript 소개 텍스트 상자에 숫자만 입력할 수 있도록 구현하는 방법

위 내용은 jQuery 제어 텍스트 상자가 자동으로 글꼴 채우기 예제 공유를 축소합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!