JQuery实现最字体的放大缩小
网页常常有对字体放大缩小的需求,我们不妨来看一下下面这段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实现最字体的放大缩小的更多相关文章
- kotlin3-IdeaIU编辑器字体自动放大缩小
- 如何让vim像IDE一样一键放大缩小字号?
原创,转载请注明出处 在其他IDE中,比如codeblocks,按住ctrl,然后滑动鼠标滚轮就可以实现字体的放大缩小. 在强大的vim中code怎么能缺少这种功能?! 在vim插件库中查询一番,发现 ...
- [jQuery]地图浏览:如何实现图片的放大缩小和点击之后的位置居中
HTML代码: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis. ...
- jquery 实现点击图片居住放大缩小
该功能是基于jquery实现的,所以 第一步则是引入jquery jquery下载地址:https://jquery.com/download/ 或者使用此时调试的版本(3版本) /*! jQuery ...
- jQuery控制网页字体大小和肤色
在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> ...
- HTML5 canvas处理图片的各种效果,包括放大缩小涂鸦等
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html jQuery 缩放 旋转 裁剪图片 Image Cropper ...
- Canvas实现图片放大缩小移动操作
对于HTML5相信大家都不陌生,很早就出来了,但是貌似都没有真正的使用过.最近做项目时要实现这样一个需求:一个图片,大小不固定,要求能实现类似地图一样放大.缩小.移动功能.这里就很合适使用html5的 ...
- 移动端开发,文字增加,字体自动放大(font boosting)
问题缘由:做文章详情页的时候,文字多了一点字体就放大了,真的是奇了怪了. 问题重现 一段文字的时候 两段文字的时候 很明显,字体放大了很多. 疑点 meta标签缩放的问题 最近正好遇到处理retain ...
- js监听页面放大缩小
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...
随机推荐
- Java并发编程原理与实战十六:AQS
一.概述 谈到并发,不得不谈ReentrantLock:而谈到ReentrantLock,不得不谈AbstractQueuedSynchronized(AQS)! 类如其名,抽象的队列式的同步器,AQ ...
- 【BZOJ】3453: tyvj 1858 XLkxc 拉格朗日插值(自然数幂和)
[题意]给定k<=123,a,n,d<=10^9,求: $$f(n)=\sum_{i=0}^{n}\sum_{j=1}^{a+id}\sum_{x=1}^{j}x^k$$ [算法]拉格朗日 ...
- 【BZOJ】2655: calc 动态规划+拉格朗日插值
[题意]一个序列$a_1,...,a_n$合法当且仅当它们都是[1,A]中的数字且互不相同,一个序列的价值定义为数字的乘积,求所有序列的价值和.n<=500,A<=10^9,n+1< ...
- HDU 3449 Consumer (背包问题之有依赖背包)
题目链接 Problem Description FJ is going to do some shopping, and before that, he needs some boxes to ca ...
- JavaScript的基本介绍
JavaScript入门介绍 输出语句:document.write() 1.执行顺序:从上到下,每一天语句是要加分号的,如果不加的话,浏览器会默认帮你自动添加,分号. 2.注释:一行注释就是 ...
- centos7.2安装php7.2
Centos 7源码编译安装 php7.2 原文地址:https://renwole.com/archives/29 介绍: 先安装php依赖包,否则在编译安装php7的过程当中会出现各种报错,安装完 ...
- oracle同义词是什么意思?
相当于alias,比如把user1.table1 在user2中建一个同义词table1create synonym table1 for user1.table1;这样当我们在user2中查sele ...
- zookeeper集群查看状态时报错Error contacting service. It is probably not running的一些坑以及解决办法
最近在搭建mq集群时候需要用到,zookeeper,可是启动的时候显示成功了,查看状态的时候却报错了: 碰到这个问题也是研究好好半天才解决,这里就总结出一个快速解决办法! 首先,必须看日志: 报错信息 ...
- 【Python】POST上传APK检测是否存在ZipperDown漏洞
前言 用POST的方式上传文件,检测APK是否存在ZipperDown漏洞. 代码 # authour:zzzhhh # 2018.08.08 # check ZipperDown # -*- cod ...
- linux中断申请之request_threaded_irq 【转】
转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=21977330&id=3755609 在linux里,中断处理分 ...