지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Jquery 글꼴 크기 설정 및 플러그인에 대한 자세한 설명

Jquery 글꼴 크기 설정 및 플러그인에 대한 자세한 설명

伊谢尔伦
풀어 주다： 2017-06-17 09:38:18
원래의
1877명이 탐색했습니다.

jQuery 글꼴 크기 설정, 먼저 글꼴 크기를 가져와 처리합니다. 수정된 값을 저장하세요. slice() 메서드는 기존 배열에서 선택한 요소를 반환합니다. 

arrayObject.slice(start,end)。
로그인 후 복사

start 필수입니다. 선택을 시작할 위치를 지정합니다. 음수인 경우 배열 끝에서부터의 위치를 ​​지정합니다. 즉, -1은 마지막 요소를 나타내고, -2는 마지막 요소에서 두 번째를 나타내는 식입니다.
종료 선택사항. 선택이 끝나는 위치를 지정합니다. 이 매개변수는 배열 조각 끝에 있는 배열 인덱스입니다. 이 매개변수를 지정하지 않으면 분할 배열에는 배열의 시작부터 끝까지 모든 요소가 포함됩니다. 이 매개변수가 음수이면 배열 끝부터 시작하는 요소를 지정합니다.
jQuery 코드는 다음과 같습니다. 

<script type="text/javascript">
    $(function(){
        $("span").click(function(){
            //获取para的字体大小
            var thisEle = $("#para").css("font-size"); 
            //parseFloat的第二个参数表示转化的进制，10就表示转为10进制
            var textFontSize = parseFloat(thisEle , 10);
            //javascript自带方法
            var unit = thisEle.slice(-2); //获取单位
            var cName = $(this).attr("class");
            if(cName == "bigger"){
                    textFontSize += 2;
            }else if(cName == "smaller"){
                    textFontSize -= 2;
            }
            //设置para的字体大小
            $("#para").css("font-size",  textFontSize + unit );
        });
    });
  </script>
로그인 후 복사

html 코드는 다음과 같습니다. 

<body>
<div class="msg">
    <div class="msg_caption">
        <span class="bigger" >放大</span>
        <span class="smaller" >缩小</span>
    </div>
    <div>
        <p id="para" >
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text. This is some text. This is some text. This is some
        text. This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text.
        </p>
    </div>
</div>
</body>
로그인 후 복사

jQuery 글꼴 크기 조정 플러그인 PDFontSize

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandao " />
<meta name="keywords" content="pandao " />
<meta name="description" content="pandao " />
<meta name="author" content="pandao" />
<!--
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" href="images/favicon.ico" />
-->
<title>jQuery调整字体大小插件PDFontSize </title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
#test{overflow:hidden;width:50%;margin:30px auto 10px auto;background:#f6f6f6;border:1px solid #eee;padding:15px;}
#toolbar{width:300px;margin:0 auto;text-align:center;}
/*
按钮样式，也可通过插件参数设置
.PDFontSizeBtns{display:inline-block;padding:2px 5px;background:#f6f6f6;border:1px solid #eee;cursor: pointer;}
.PDFontSizeBtns:hover{border:1px solid #ddd;background:#eee;}*/
</style>
</head>
<body> 
<div id="test">jQuery.PDFontSize()</div>
<div id="toolbar">
    <a href="javascript:;" class="PDFontSizeBtns" id="minus">A-</a>
    <a href="javascript:;" class="PDFontSizeBtns" id="default">A</a>
    <a href="javascript:;" class="PDFontSizeBtns" id="plus">A+</a>
</div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
jQuery.easing[&#39;jswing&#39;]=jQuery.easing[&#39;swing&#39;];jQuery.extend(jQuery.easing,
{def:&#39;easeOutQuad&#39;,swing:function(x,t,b,c,d)
{return jQuery.easing[jQuery.easing.def](x,t,b,c,d)},easeInQuad:function(x,t,b,c,d)
{return c*(t/=d)*t+b},easeOutQuad:function(x,t,b,c,d)
{return-c*(t/=d)*(t-2)+b},easeInOutQuad:function(x,t,b,c,d)
{if((t/=d/2)<1)return c/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b},easeInCubic:function(x,t,b,c,d)
{return c*(t/=d)*t*t+b},easeOutCubic:function(x,t,b,c,d)
{return c*((t=t/d-1)*t*t+1)+b},easeInOutCubic:function(x,t,b,c,d)
{if((t/=d/2)<1)return c/2*t*t*t+b;return c/2*((t-=2)*t*t+2)+b},easeInQuart:function(x,t,b,c,d)
{return c*(t/=d)*t*t*t+b},easeOutQuart:function(x,t,b,c,d)
{return-c*((t=t/d-1)*t*t*t-1)+b},easeInOutQuart:function(x,t,b,c,d)
{if((t/=d/2)<1)return c/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b},easeInQuint:function(x,t,b,c,d)
{return c*(t/=d)*t*t*t*t+b},easeOutQuint:function(x,t,b,c,d)
{return c*((t=t/d-1)*t*t*t*t+1)+b},easeInOutQuint:function(x,t,b,c,d)
{if((t/=d/2)<1)return c/2*t*t*t*t*t+b;return c/2*((t-=2)*t*t*t*t+2)+b},easeInSine:function(x,t,b,c,d)
{return-c*Math.cos(t/d*(Math.PI/2))+c+b},easeOutSine:function(x,t,b,c,d)
{return c*Math.sin(t/d*(Math.PI/2))+b},easeInOutSine:function(x,t,b,c,d)
{return-c/2*(Math.cos(Math.PI*t/d)-1)+b},easeInExpo:function(x,t,b,c,d)
{return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b},easeOutExpo:function(x,t,b,c,d)
{return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b},easeInOutExpo:function(x,t,b,c,d)
{if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;return c/2*(-Math.pow(2,-10*--t)+2)+b},easeInCirc:function(x,t,b,c,d)
{return-c*(Math.sqrt(1-(t/=d)*t)-1)+b},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b},easeInOutCirc:function(x,t,b,c,d)
{if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b},easeInElastic:function(x,t,b,c,d)
{var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);
return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b},easeOutElastic:function(x,t,b,c,d)
{var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c))
{a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b},easeInOutElastic:function(x,t,b,c,d)
{var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c))
{a=c;var s=p/4}else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;
return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b},easeInBack:function(x,t,b,c,d,s)
{if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b},easeOutBack:function(x,t,b,c,d,s)
{if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b},easeInOutBack:function(x,t,b,c,d,s)
{if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b},easeInBounce:function(x,t,b,c,d)
{return c-jQuery.easing.easeOutBounce(x,d-t,0,c,d)+b},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75))
{return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75))
{return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}},easeInOutBounce:function(x,t,b,c,d)
{if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+b;return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+c*.5+b}});
 
(function() {
    /**
    * jQuery调整字体大小插件PDFontSize (全兼容)
    */
    $.fn.extend({
        PDFontSize : function(_params) {
            //默认参数
            var params = {
                max : 40,        //最大的字体大小
                min : 12,        //最小的字体大小
                change : 5,      //每次增加或减小的大小
                plusBtn : &#39;&#39;,    //#plus
                minusBtn : &#39;&#39;,   //#minus
                defaultBtn : &#39;&#39;, //#default
                animate : true,          //是否使用动画变化
                animateTime : 300,       //动画变化时间
                easing : &#39;easeOutQuart&#39;, //动画缓动，需要使用jQuery.easing插件
                btnStyle : {display:&#39;inline-block&#39;, padding:&#39;2px 5px&#39;, background:&#39;#f6f6f6&#39;, border:&#39;1px solid #eee&#39;, cursor: &#39;pointer&#39;}, //按钮样式(正常)
                btnHoverStyle : {border:&#39;1px solid #ddd&#39;, background:&#39;#eee&#39;} //按钮样式(鼠标经过)
            };
 
            if(_params) params = $.extend(params, _params);  //扩展默认参数
 
            var contentObj = $(this);  //内容层对象
 
            var fontSizeHandler = function(fontSize) {
                //alert(&#39;fontSizeHandler();&#39;);
                if(params.animate == true)
                {
                    contentObj.animate({fontSize : fontSize + &#39;px&#39;}, params.animateTime, params.easing);
                }
                else
                {
                    contentObj.css({fontSize : fontSize + &#39;px&#39;});
                }
            };
 
            if($(params.plusBtn))
            {
                $(params.plusBtn).bind(&#39;click&#39;, function() {
                    var fontSize = parseInt(contentObj.css(&#39;fontSize&#39;));
 
                    if(fontSize < params.max)
                    {
                        fontSize += params.change;
                        if(fontSize > params.max) fontSize = params.max;
 
                        fontSizeHandler(fontSize);
                    }
                });
            }
 
            if($(params.minusBtn))
            {
                $(params.minusBtn).bind(&#39;click&#39;, function() {
                    var fontSize = parseInt(contentObj.css(&#39;fontSize&#39;));
 
                    if(fontSize > params.min)
                    {
                        fontSize -= params.change;
                        if(fontSize < params.min) fontSize = params.min;
                        fontSizeHandler(fontSize);
                    }
                });
            }
 
            if($(params.defaultBtn))
            {
                $(params.defaultBtn).bind(&#39;click&#39;, function() {
                    fontSizeHandler(params.min);
                });
            }
 
            $(&#39;.PDFontSizeBtns&#39;).css(params.btnStyle);
 
            $(&#39;.PDFontSizeBtns&#39;).hover(function() {
                $(this).css(params.btnHoverStyle);
            }, function() {
                $(this).css(params.btnStyle);
            });
 
            $(&#39;.PDFontSizeBtns&#39;).each(function() {
                $(this).click(function() {
                    $(this).blur();
                });
            });
 
            return this;
        }
    });
})();
 
//使用方法
$(function() {
    $(&#39;#test&#39;).PDFontSize({
        max : 100,
        //min : 12,
        change : 20,
        plusBtn : &#39;#plus&#39;,
        minusBtn : &#39;#minus&#39;,
        defaultBtn : &#39;#default&#39;
    });
});
</script>
</body>
</html>
로그인 후 복사
소개

위 내용은 Jquery 글꼴 크기 설정 및 플러그인에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
jquery ~에 대한 크기 字体 设置
원천：php.cn
이전 기사：jquery에서 글꼴 크기와 줄 높이를 조정하는 방법은 무엇입니까? 다음 기사：jquery는 어떻게 백그라운드에서 목록 컬렉션을 탐색하고 얻나요?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...
에서 2024-04-05 09:26:49
0
1
1418
최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...
에서 2024-04-04 18:40:04
0
1
3528
북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...
에서 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...
에서 2024-04-04 12:53:48
0
1
303
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿