Explication détaillée des paramètres de taille de police et des plug-ins jquery-js tutoriel-php.cn

Paramètre de la taille de la police JQuery, récupérez d'abord la taille de la police et traitez-la. Enregistrez la valeur modifiée. La méthode slice() renvoie les éléments sélectionnés dans un tableau existant.

arrayObject.slice(start,end)。

Copier après la connexion

démarrage Obligatoire. Spécifie où commencer la sélection. S'il est négatif, il spécifie la position à partir de la fin du tableau. Autrement dit, -1 fait référence au dernier élément, -2 fait référence à l'avant-dernier élément, et ainsi de suite.
fin Facultatif. Spécifie où se termine la sélection. Ce paramètre est l'index du tableau à la fin du fragment de tableau. Si ce paramètre n'est pas spécifié, le tableau fractionné contient tous les éléments du début à la fin du tableau. Si ce paramètre est négatif, il précise les éléments en partant de la fin du tableau.
Le code jQuery est le suivant :

<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>

Copier après la connexion

Le code html est le suivant :

<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>

Copier après la connexion

Présentation d'un plug-in d'ajustement de la taille de police 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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!