interface Web
js tutoriel
Explication détaillée des paramètres de taille de police et des plug-ins jquery
Explication détaillée des paramètres de taille de police et des plug-ins jquery
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)。
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>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>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['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>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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment fixer l'heure prévue de publication des ouvrages sur Douyin ? Comment définit-il la durée de la vidéo ?
Mar 27, 2024 pm 06:11 PM
Publier des œuvres sur Douyin peut attirer plus d'attention et de likes, mais il peut parfois nous être difficile de publier des œuvres en temps réel. Dans ce cas, nous pouvons utiliser la fonction de publication programmée de Douyin. La fonction de publication planifiée de Douyin permet aux utilisateurs de publier automatiquement des œuvres à des heures planifiées, ce qui permet de mieux planifier le plan de publication et d'augmenter l'exposition et l'influence des œuvres. 1. Comment fixer l'heure prévue de publication des ouvrages sur Douyin ? Pour définir une heure de sortie programmée, accédez d'abord à la page d'accueil personnelle de Douyin, recherchez le bouton « + » dans le coin supérieur droit et cliquez pour accéder à la page de sortie. Il y a une icône d'horloge dans le coin inférieur droit de la page de publication. Cliquez pour accéder à l'interface de publication planifiée. Dans l'interface, vous pouvez choisir le type d'œuvre que vous souhaitez publier, notamment des vidéos courtes, des vidéos longues et des diffusions en direct. Ensuite, vous devez définir quand votre travail sera publié. TikTok fournit
Comment changer la police du Xiaomi 11_Comment changer la police du Xiaomi 11
Mar 25, 2024 pm 07:26 PM
1. Ouvrez les paramètres du téléphone et cliquez sur [Afficher]. 2. Cliquez sur [Police]. 3. Sélectionnez la police que vous aimez ou cliquez sur [Plus de polices] pour télécharger l'application.
Où est définie la balise Douyin ? Comment peut-on l'étiqueter pour pouvoir le pousser avec précision ?
Mar 27, 2024 am 11:01 AM
En tant que l'une des plateformes de vidéos courtes les plus populaires au monde, Douyin permet à chacun de devenir créateur et de partager chaque instant de la vie. Pour les utilisateurs de Douyin, les balises sont une fonction très importante. Elles peuvent aider les utilisateurs à mieux classer et récupérer le contenu, et permettent également à la plate-forme de transmettre plus précisément le contenu approprié aux utilisateurs. Alors, où sont définies les balises Douyin ? Cet article expliquera en détail comment configurer et utiliser les balises sur Douyin. 1. Où est définie la balise Douyin ? L'utilisation de balises sur Douyin peut aider les utilisateurs à mieux classer et étiqueter leurs œuvres, permettant ainsi aux autres utilisateurs de les trouver et de les suivre plus facilement. La méthode pour définir l'étiquette est la suivante : 1. Ouvrez l'application Douyin et connectez-vous à votre compte. 2. Cliquez sur le signe "+" en bas de l'écran et sélectionnez le bouton "Publier". 3.
Comment configurer la publication programmée sur Weibo_Tutoriel sur la configuration de la publication programmée sur Weibo
Mar 29, 2024 pm 03:51 PM
1. Ouvrez le client Weibo, cliquez sur les trois petits points sur la page d'édition, puis cliquez sur Publication programmée. 2. Après avoir cliqué sur la publication programmée, il y aura une option d'heure sur le côté droit de l'heure de publication, modifiez l'article et cliquez sur les mots jaunes dans le coin inférieur droit pour publier régulièrement. 3. La version mobile de Weibo ne prend actuellement pas en charge la publication programmée. Cette fonction ne peut être utilisée que sur le client PC !
Le mode Ne pas déranger ne fonctionne pas sur iPhone : correctif
Apr 24, 2024 pm 04:50 PM
Même répondre à des appels en mode Ne pas déranger peut être une expérience très ennuyeuse. Comme son nom l'indique, le mode Ne pas déranger désactive toutes les notifications d'appels entrants et les alertes provenant d'e-mails, de messages, etc. Vous pouvez suivre ces ensembles de solutions pour résoudre ce problème. Correctif 1 – Activer le mode de mise au point Activez le mode de mise au point sur votre téléphone. Étape 1 – Faites glisser votre doigt depuis le haut pour accéder au Centre de contrôle. Étape 2 – Ensuite, activez le « Mode Focus » sur votre téléphone. Le mode Focus active le mode Ne pas déranger sur votre téléphone. Aucune alerte d’appel entrant n’apparaîtra sur votre téléphone. Correctif 2 – Modifier les paramètres du mode de mise au point S'il y a des problèmes dans les paramètres du mode de mise au point, vous devez les résoudre. Étape 1 – Ouvrez la fenêtre des paramètres de votre iPhone. Étape 2 – Ensuite, activez les paramètres du mode Focus
Comment changer les polices dans le navigateur mobile QQ
Apr 07, 2024 pm 06:43 PM
Comment changer la police dans le navigateur mobile QQ ? De nombreuses personnes aiment utiliser le navigateur QQ sur les téléphones mobiles. Ce navigateur peut non seulement parcourir rapidement les pages Web, mais également traiter divers types de données de fichiers. De plus, ce navigateur dispose également de paramètres personnalisés. propres préférences. , de nombreux utilisateurs novices ne savent toujours pas comment modifier les polices de ce navigateur. Cet article vous donnera un aperçu des étapes pour modifier les polices dans le navigateur mobile QQ, dans l'espoir de vous aider à résoudre le problème. Liste des étapes pour modifier les polices dans le navigateur QQ mobile 1. Allumez le téléphone, puis cliquez pour ouvrir « Navigateur QQ » (comme indiqué sur l'image). 2. Sur la page « Mon » du navigateur QQ, cliquez sur le logo « Paramètres » dans le coin supérieur droit (comme indiqué sur l'image). 3. Dans les paramètres, cliquez pour entrer « Paramètres de police » (comme indiqué sur la figure)
Comment définir la touche Entrée pour envoyer des messages dans QQ
Mar 25, 2024 pm 07:10 PM
1. Tout d’abord, cliquez sur le bureau du téléphone mobile pour accéder à QQ, puis cliquez sur l’avatar dans le coin supérieur gauche. 2. Cliquez sur [Paramètres] dans le coin inférieur gauche. 3. Cliquez pour ouvrir [Accessibilité]. 4. Ensuite, il suffit de cliquer sur le commutateur [Touche Entrée pour envoyer un message].
Comment régler le compte à rebours pour récupérer des billets à Damai
Apr 01, 2024 pm 07:01 PM
Lors de l'achat de billets sur Damai.com, afin de garantir que l'heure d'achat du billet peut être comprise avec précision, les utilisateurs peuvent définir une horloge flottante pour récupérer les billets. La méthode de réglage détaillée est ci-dessous, apprenons ensemble. Comment lier l'horloge flottante à Damai 1. Cliquez pour ouvrir l'application d'horloge flottante sur votre téléphone pour accéder à l'interface, puis cliquez sur l'emplacement où le contrôle de vente flash est défini, comme indiqué dans la figure ci-dessous : 2. Après être arrivé à la page d'ajout de nouveaux enregistrements, cliquez sur Damai.com Copiez la page du lien d'achat de billet copiée. 3. Ensuite, définissez l'heure de la vente flash et l'heure de notification ci-dessous, activez le bouton de commutation derrière [Enregistrer dans le calendrier] et cliquez sur [Enregistrer] ci-dessous. 4. Cliquez pour activer [Compte à rebours], comme indiqué dans la figure ci-dessous : 5. Lorsque l'heure du rappel arrive, cliquez sur le bouton [Démarrer l'image dans l'image] ci-dessous. 6. Quand vient le moment d’acheter le billet
