网页常常有对字体放大缩小的需求,我们不妨来看一下下面这段JQuery代码的实现。

假如在html页面代码中我们有这么一段代码:

<p>啦啦啦啦啦啦啦啦啦啦</p>

那么JQuery的实现如下

$(document).ready(function () {
var fontSize = $("p").css("font-size");
//取得当前字体大小
var fontSizeNumber = parseFloat(fontSize , 10);
//取得单位
var unit = size.slice(-2);
//放大字体,bigFontSize为按钮id
$("#bigFontSize").click(function () {
fontSizeNumber += 2;
$("p").css("font-size", fontSizeNumber + unit);
});
//减小字体,smallFontSize为按钮id
$("#smallFontSize").click(function () {
fontSizeNumber -= 2;
$("p").css("font-size", fontSizeNumber + unit);
});
});

JQuery实现最字体的放大缩小的更多相关文章

  1. kotlin3-IdeaIU编辑器字体自动放大缩小

  2. 如何让vim像IDE一样一键放大缩小字号?

    原创,转载请注明出处 在其他IDE中,比如codeblocks,按住ctrl,然后滑动鼠标滚轮就可以实现字体的放大缩小. 在强大的vim中code怎么能缺少这种功能?! 在vim插件库中查询一番,发现 ...

  3. [jQuery]地图浏览:如何实现图片的放大缩小和点击之后的位置居中

    HTML代码: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis. ...

  4. jquery 实现点击图片居住放大缩小

    该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) /*! jQuery ...

  5. jQuery控制网页字体大小和肤色

    在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> ...

  6. HTML5 canvas处理图片的各种效果,包括放大缩小涂鸦等

    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...

  7. Canvas实现图片放大缩小移动操作

    对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...

  8. 移动端开发,文字增加,字体自动放大(font boosting)

    问题缘由:做文章详情页的时候,文字多了一点字体就放大了,真的是奇了怪了. 问题重现 一段文字的时候 两段文字的时候 很明显,字体放大了很多. 疑点 meta标签缩放的问题 最近正好遇到处理retain ...

  9. js监听页面放大缩小

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...

随机推荐

  1. Scrapy爬虫框架之爬取校花网图片

    Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设 ...

  2. node.js 基础篇

    日志输出方式 node test.js 2>error.log 1>info.log 如果需要日志文件追加 node test.js 2>>error.log 1>> ...

  3. UNIX环境高级编程 第4章 文件和目录

    第三章说明了关于文件I/O的基本函数,主要是针对普通regular类型文件.本章描述文件的属性,除了regular文件还有其他类型的文件. 函数stat.fstat.fstatat和lstat sta ...

  4. 使用纯注解与配置类开发springMVC项目,去掉xml配置

    最近拜读了杨开振老师的书,深入浅出springBoot2.x,挖掘了很多以前被忽略的知识, 开发一年多,工作中一直用传统springmvc的开发,基本都还是用的传统的xml配置开发, 看到书里有提到, ...

  5. 最短路径—Floyd算法

    Floyd算法 所有顶点对之间的最短路径问题是:对于给定的有向网络G=(V,E),要对G中任意两个顶点v,w(v不等于w),找出v到w的最短路径.当然我们可以n次执行DIJKSTRA算法,用FLOYD ...

  6. 使用ubifs格式的根文件系统

    配置内核,使其支持ubifs文件系统 1)Device Drivers  --->Memory Technology Device (MTD) support  --->UBI - Uns ...

  7. 22 Gobs of data 设计和使用采集数据的包

    Gobs of data 24 March 2011 Introduction To transmit a data structure across a network or to store it ...

  8. mac下PHPStorm2018.2破解教程

    1.首先安装phpstorm 2.下载JetbrainsCrack-3.1-release-enc.jar然后把这个文件放入安装phpstorm/contents/lib目录下 3.用文本编辑器打开p ...

  9. python基础-类的起源

    Python中一切事物都是对象. class Foo(object): def __init__(self,name): self.name = name f = Foo("alex&quo ...

  10. Python字符串(Str)详解

    字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 创建字符串很简单,只要为变量分配一个值即可 字符串的格式 b = "hello itcast. ...