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 ...
随机推荐
- php设计模式-工厂设计模式
概念: 工厂设计模式提供获取某个对象的新实例的一个接口,同时使调用代码避免确定实际实例化基类步骤. 很多高级模式都是依赖于工厂模式.
- 通过xshell/securecrt连接linux上传/下载文件
通过ssh等客户端连接远程linux总会有上传下载的需求,这里分别用Ubuntu和centos展示安装lrzsz软件的命令,使用命令是一致的,这里简单写 1.安装: centos:(注:参数-y中的意 ...
- shell if判断中常用的a-z表达式含义
shell if判断中常用的a-z表达式含义 可通过在在linux中man test命令查看下列参数的详细用法 [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 ...
- pandas空值处理与插值
# coding:utf-8 import pandas as pd import numpy as np import matplotlib.pyplot as plt from scipy.int ...
- Entity Framework Context上下文管理(CallContext 数据槽)
Context上下文管理 Q1:脏数据 Q2:一次逻辑操作中,会多次访问数据库,增加了数据库服务器的压力 >在一次逻辑操作中实现上下文实例唯一 方法一:单例模式:内存的爆炸式增长 在整个运行期间 ...
- 网络流最大流(拆点)(附带kuangbin最大流模板)(目测这个题有bug)
题目链接:https://vjudge.net/contest/68128#problem/H 我觉得这个题有bug,如果饮料和食物都为0,但是同时有五个人什么也不需要,按道理来讲,最多受益的人数为5 ...
- [转]边框回归(Bounding Box Regression)详解
https://blog.csdn.net/zijin0802034/article/details/77685438 Bounding-Box regression 最近一直看检测有关的Paper, ...
- https://www.yunpanjingling.com/
https://www.yunpanjingling.com/ 账号 kein20 passwd a1234
- 使用ubifs格式的根文件系统
配置内核,使其支持ubifs文件系统 1)Device Drivers --->Memory Technology Device (MTD) support --->UBI - Uns ...
- Mysql_Learning_Notes_mysql系统结构_2
Mysql_Learning_Notes_mysql系统结构_2 三层体系结构,启动方式,日志类型及解析方法,mysql 升级 连接层 通信协议处理\线程处理\账号认证(用户名和密码认证)\安全检查等 ...