Jquery 글꼴 크기 설정 및 플러그인에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-06-17 09:38:181804검색
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['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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.