关于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邮箱登陆入口在哪里

7697

Java教程

1640

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版

热门话题