Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der JQuery-Schriftgrößeneinstellungen und Plug-Ins
Detaillierte Erläuterung der JQuery-Schriftgrößeneinstellungen und Plug-Ins
- 伊谢尔伦Original
- 2017-06-17 09:38:181874Durchsuche
JQuery-Schriftgrößeneinstellung, ermitteln Sie zunächst die Schriftgröße und verarbeiten Sie sie. Speichern Sie den geänderten Wert. Die Methode slice() gibt ausgewählte Elemente aus einem vorhandenen Array zurück.
arrayObject.slice(start,end)。
Start Erforderlich. Gibt an, wo mit der Auswahl begonnen werden soll. Wenn negativ, gibt es die Position vom Ende des Arrays an. Das heißt, -1 bezieht sich auf das letzte Element, -2 bezieht sich auf das vorletzte Element und so weiter.
Ende Optional. Gibt an, wo die Auswahl endet. Dieser Parameter ist der Array-Index am Ende des Array-Fragments. Wenn dieser Parameter nicht angegeben ist, enthält das geteilte Array alle Elemente vom Anfang bis zum Ende des Arrays. Wenn dieser Parameter negativ ist, gibt er die Elemente ab dem Ende des Arrays an.
Der jQuery-Code lautet wie folgt:
<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>Der HTML-Code lautet wie folgt:
<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>Einführung eines jQuery-Plug-ins zur Anpassung der Schriftgröße 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>Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JQuery-Schriftgrößeneinstellungen und Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie passt man Schriftgröße und Zeilenhöhe in JQuery an?Nächster Artikel：Wie passt man Schriftgröße und Zeilenhöhe in JQuery an?
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse