關於jquery字體大小設定與外掛程式詳解-js教程-PHP中文網

首頁

web前端

js教程

關於jquery字體大小設定與外掛程式詳解

伊谢尔伦

Jun 17, 2017 am 09:38 AM

jquery 關於大小字體設定

jQuery字體大小的設置，先取得字體大小，進行處理。再儲存修改的值。 slice() 方法可從現有的陣列中傳回選定的元素。

arrayObject.slice(start,end)。

登入後複製

start 必需。規定從何處開始選取。如果是負數，那麼它規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。
end 可選。規定從何處結束選取。此參數是數組片斷結束處的數組下標。如果沒有指定該參數，那麼切分的陣列包含從 start 到陣列結束的所有元素。如果這個參數是負數，那麼它規定的是從陣列尾部開始算起的元素。
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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7692

Java教學

1639

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

Related knowledge

抖音如何設定定時發布作品時間？它如何設定影片時間長短？ Mar 27, 2024 pm 06:11 PM

在抖音上發布作品能夠更吸引關注和點贊，但有時候我們可能難以即時發布作品，這時就可以利用抖音的定時發布功能。抖音的定時發布功能可讓使用者在預定的時間自動發布作品，這樣可以更好地規劃發布計劃，增加作品的曝光率和影響力。一、抖音如何設定定時發布作品時間？若要設定定時發佈作品時間，先進入抖音個人首頁，在右上角找到「+」按鈕，點選進入發佈頁面。在發布頁面右下角有一個鐘錶的圖標，點擊進入定時發布介面。在介面中，你可以選擇要發布的作品類型，包括短影片、長影片和直播等。接下來，你需要設定作品的發佈時間。抖音提供了

小米11字型怎麼改_小米11更換字型方法 Mar 25, 2024 pm 07:26 PM

1.開啟手機設置，點選【顯示】。 2、點選【字體】。 3.選擇自己喜歡的字體或點選【更多字體】下載應用程式即可。

抖音標籤在哪裡設定出來？它怎麼打標籤，才能精準推流？ Mar 27, 2024 am 11:01 AM

抖音作為全球最受歡迎的短影片平台之一，讓每個人都能成為創作者，分享生活中的點點滴滴。對於抖音使用者來說，標籤是一個非常重要的功能，它可以幫助使用者更好地分類和檢索內容，同時也能讓平台更精準地推送合適的內容給使用者。那麼，抖音標籤在哪裡設定呢？本文將詳細介紹如何在抖音上設定和使用標籤。一、抖音標籤在哪裡設定？在抖音上使用標籤可以幫助使用者更好地分類和標記自己的作品，讓其他使用者更容易找到並關注。設定標籤的方法如下：1.開啟抖音APP，並登入你的帳號。 2.點選畫面下方的「+」號，選擇「發表」按鈕。 3.

微博怎麼設定定時發布_微博設定定時發布方法教程 Mar 29, 2024 pm 03:51 PM

1.開啟微博客戶端，在編輯頁面中點選三個小點，再點選定時發。 2.點擊定時發之後，在發佈時間右側就有時間選項，設定好時間，編輯好文章，點擊右下角的黃色字定時發布即可。 3.微博手機端暫時不支援定時發布，只能在PC客戶端使用該功能哦！

請勿打擾模式在iPhone中不起作用：修復 Apr 24, 2024 pm 04:50 PM

即使在「請勿打擾」模式下接聽電話也可能是一種非常煩人的體驗。顧名思義，請勿打擾模式可關閉來自郵件、訊息等的所有來電通知和警報。您可以按照這些解決方案集進行修復。修復1–啟用對焦模式在手機上啟用對焦模式。步驟1–從頂部向下滑動以存取控制中心。步驟2–接下來，在手機上啟用「對焦模式」。專注模式可在手機上啟用「請勿打擾」模式。它不會讓您的手機上出現任何來電提醒。修復2–更改對焦模式設定如果對焦模式設定中存在一些問題，則應進行修復。步驟1–打開您的iPhone設定視窗。步驟2–接下來，開啟「對焦」模式設

手機QQ瀏覽器怎麼更換字體 Apr 07, 2024 pm 06:43 PM

手機QQ瀏覽器怎麼更換字體？不少人喜歡使用手機QQ瀏覽器，這款瀏覽器不僅可以快速瀏覽網頁，還能處理各類文件數據，而且這款瀏覽器還擁有個性化設置，大家可以根據自己的喜好設置瀏覽器的字體，不少新手用戶還不清楚如何更換這款瀏覽器的字體。這篇文章為大家帶來手機QQ瀏覽器更換字體步驟一覽，希望能夠幫助大家解決問題。手機QQ瀏覽器更換字體步驟一覽1、開啟手機，然後點選開啟「QQ瀏覽器」（如圖所示）。 2、在QQ瀏覽器「我的」頁面，點選右上角的「設定」標識（如圖）。 3.在設定中，點選進入「字體設定」（如圖

qq中設定回車鍵發訊息的操作方法 Mar 25, 2024 pm 07:10 PM

1.先在手機桌面點選進入qq，點選左上角的頭像。 2.點選左下角的【設定】。 3.點選開啟【輔助功能】。 4.然後我們只要點選打開【回車鍵發送訊息】開關即可。

大麥怎麼設定搶票倒數計時 Apr 01, 2024 pm 07:01 PM

大麥網購票時，為了確保能夠準確掌握購票時間，用戶可以設定一個懸浮時鐘來進行搶票，詳細的設定方法就在下文中，讓我們一起學習下吧。大麥綁定懸浮時鐘方法1.在手機中點擊開啟懸浮時鐘app進入介面後，在設定秒殺提查的位置點擊，如下圖所示位置：2.來到新增記錄的頁面後，把在大麥網中複製的買票連結頁面複製進去。 3.接下來在下方設定秒殺時間和通知時間，打開【儲存到日曆】後面的開關按鈕，並在下方點選【儲存】。 4.點選開啟【倒數計時】，如下圖所示：5.到提醒時間時在下方點選【開始畫中畫】的按鈕。 6.購票時間到時

See all articles

關於jquery字體大小設定與外掛程式詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題