jqueryのフォントサイズ設定とプラグインを詳しく解説
jQueryのフォントサイズ設定では、まずフォントサイズを取得して処理します。 変更した値を保存します。 slice() メソッドは、既存の配列から選択された要素を返します。
arrayObject.slice(start,end)。
start 必須。選択範囲を開始する位置を指定します。負の場合は、配列の末尾からの位置を指定します。つまり、-1 は最後の要素を指し、-2 は最後から 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['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,
{def:'easeOutQuad',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 : '', //#plus
minusBtn : '', //#minus
defaultBtn : '', //#default
animate : true, //是否使用动画变化
animateTime : 300, //动画变化时间
easing : 'easeOutQuart', //动画缓动，需要使用jQuery.easing插件
btnStyle : {display:'inline-block', padding:'2px 5px', background:'#f6f6f6', border:'1px solid #eee', cursor: 'pointer'}, //按钮样式(正常)
btnHoverStyle : {border:'1px solid #ddd', background:'#eee'} //按钮样式(鼠标经过)
};
if(_params) params = $.extend(params, _params); //扩展默认参数
var contentObj = $(this); //内容层对象
var fontSizeHandler = function(fontSize) {
//alert('fontSizeHandler();');
if(params.animate == true)
{
contentObj.animate({fontSize : fontSize + 'px'}, params.animateTime, params.easing);
}
else
{
contentObj.css({fontSize : fontSize + 'px'});
}
};
if($(params.plusBtn))
{
$(params.plusBtn).bind('click', function() {
var fontSize = parseInt(contentObj.css('fontSize'));
if(fontSize < params.max)
{
fontSize += params.change;
if(fontSize > params.max) fontSize = params.max;
fontSizeHandler(fontSize);
}
});
}
if($(params.minusBtn))
{
$(params.minusBtn).bind('click', function() {
var fontSize = parseInt(contentObj.css('fontSize'));
if(fontSize > params.min)
{
fontSize -= params.change;
if(fontSize < params.min) fontSize = params.min;
fontSizeHandler(fontSize);
}
});
}
if($(params.defaultBtn))
{
$(params.defaultBtn).bind('click', function() {
fontSizeHandler(params.min);
});
}
$('.PDFontSizeBtns').css(params.btnStyle);
$('.PDFontSizeBtns').hover(function() {
$(this).css(params.btnHoverStyle);
}, function() {
$(this).css(params.btnStyle);
});
$('.PDFontSizeBtns').each(function() {
$(this).click(function() {
$(this).blur();
});
});
return this;
}
});
})();
//使用方法
$(function() {
$('#test').PDFontSize({
max : 100,
//min : 12,
change : 20,
plusBtn : '#plus',
minusBtn : '#minus',
defaultBtn : '#default'
});
});
</script>
</body>
</html>以上がjqueryのフォントサイズ設定とプラグインを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7697
15
1640
14
1393
52
1287
25
1229
29
Douyinで作品の公開予定時刻を設定するにはどうすればよいですか?動画の長さはどのように設定されますか?
Mar 27, 2024 pm 06:11 PM
Douyinで作品を公開すると注目やいいねが集まりやすくなりますが、リアルタイムで作品を公開することが難しい場合もありますので、その場合はDouyinの予約公開機能をご利用ください。 Douyin のスケジュールリリース機能を使用すると、ユーザーはスケジュールされた時間に作品を自動的に公開できるため、リリース計画をより適切に計画し、作品の露出と影響力を高めることができます。 1. Douyin で作品を公開する予定時間を設定するにはどうすればよいですか?リリース予定時刻を設定するには、まずDouyinの個人ホームページにアクセスし、右上隅にある「+」ボタンを見つけて、クリックしてリリースページに入ります。公開ページの右下隅に時計アイコンがあります。クリックすると、スケジュールされた公開インターフェイスが表示されます。インターフェースでは、短いビデオ、長いビデオ、ライブブロードキャストなど、公開したい作品の種類を選択できます。次に、作品を公開する時間を設定する必要があります。 TikTokが提供する
Xiaomi 11のフォントを変更する方法_Xiaomi 11のフォントを変更する方法
Mar 25, 2024 pm 07:26 PM
1. 電話機の設定を開き、[表示]をクリックします。 2. ［フォント］をクリックします。 3. 好みのフォントを選択するか、[その他のフォント] をクリックしてアプリケーションをダウンロードします。
Douyinタグはどこに設定されていますか?正確にプッシュできるようにするにはどうすればタグ付けできるでしょうか?
Mar 27, 2024 am 11:01 AM
世界で最も人気のあるショートビデオ プラットフォームの 1 つである Douyin を使用すると、誰もがクリエイターになって人生のあらゆる瞬間を共有できます。 Douyin ユーザーにとって、タグは非常に重要な機能であり、ユーザーがコンテンツをより適切に分類して取得できるようになり、プラットフォームが適切なコンテンツをより正確にユーザーにプッシュできるようになります。では、Douyin タグはどこに設定されているのでしょうか?この記事ではDouyinでのタグの設定方法と使い方を詳しく解説します。 1.Douyinタグはどこに設定されていますか? Douyin でタグを使用すると、ユーザーが自分の作品をより適切に分類およびラベル付けできるようになり、他のユーザーが作品を見つけてフォローしやすくなります。ラベルを設定する方法は次のとおりです。 1. Douyin APP を開き、アカウントにログインします。 2. 画面下部の「+」記号をクリックし、「公開」ボタンを選択します。 3.
Weibo でスケジュール公開を設定する方法_Weibo でスケジュール公開を設定する方法のチュートリアル
Mar 29, 2024 pm 03:51 PM
1. Weibo クライアントを開き、編集ページで 3 つの小さな点をクリックし、[予約投稿] をクリックします。 2. 予約投稿をクリックすると、公開時間の右側に時間オプションが表示されますので、時間を設定し、記事を編集し、右下の黄色の文字をクリックして投稿を予約します。 3. モバイル版 Weibo は現在予約公開をサポートしていないため、この機能は 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 ブラウザを使用する人はたくさんいます。このブラウザは、Web ページをすばやく閲覧できるだけでなく、さまざまな種類のファイル データを処理できます。さらに、このブラウザにはカスタマイズされた設定もあります。自分の好みに合わせてブラウザのフォントを設定できます。多くの初心者ユーザーは、このブラウザのフォントを変更する方法をまだ知りません。この記事では、問題の解決に役立つことを願って、モバイル QQ ブラウザーでフォントを変更する手順の概要を説明します。モバイル QQ ブラウザでフォントを変更する手順のリスト 1. 電話の電源を入れ、[QQ ブラウザ] をクリックして開きます (図を参照)。 2. QQ ブラウザの「マイ」ページで、右上隅にある「設定」ロゴをクリックします (図を参照)。 3. 設定で、クリックして「フォント設定」を入力します（図を参照）
QQ でメッセージを送信するために Enter キーを設定する方法
Mar 25, 2024 pm 07:10 PM
1. まず、携帯電話のデスクトップをクリックして QQ に入り、左上隅のアバターをクリックします。 2. 左下の[設定]をクリックします。 3. クリックして[アクセシビリティ]を開きます。 4. 次に、[Enter キーを押してメッセージを送信する] スイッチをクリックしてオンにするだけです。
Damai でチケットを入手するためのカウントダウンを設定する方法
Apr 01, 2024 pm 07:01 PM
Damai.comでチケットを購入する際、チケット購入時間を正確に把握するために、ユーザーはチケットを取得するためにフローティングクロックを設定することができます。詳細な設定方法は以下にありますので、一緒に学びましょう。フローティング クロックを Damai にバインドする方法 1. 携帯電話でフローティング クロック アプリをクリックして開き、インターフェイスに入り、以下の図に示すように、フラッシュ セール チェックが設定されている場所をクリックします。新しいレコードを追加するページで、Damai.com をクリックしてチケット購入リンク ページをコピーします。 3. 次に、以下のフラッシュセール時間と通知時間を設定し、[カレンダーに保存]の後ろにあるスイッチボタンをオンにして、下の[保存]をクリックします。 4. 以下の図に示すように、[カウントダウン] をクリックしてオンにします。 5. リマインダー時間が来たら、下の [ピクチャーインピクチャーの開始] ボタンをクリックします。 6. チケット購入時間になったら
