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 ...
随机推荐
- Gulp安装笔记
前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...
- 回溯算法——解决n皇后问题
所谓回溯(backtracking)是通过系统地搜索求解问题的方法.这种方法适用于类似于八皇后这样的问题:求得问题的一个解比较困难,但是检查一个棋局是否构成解很容易. 不多说,放上n皇后的回溯问题代码 ...
- ntpdate[35450]: the NTP socket is in use, exiting
当前主机已是NTP服务器,需关闭当前NTP服务,再同步其他NTP服务器的时间 service ntpd stop 然后ps -ef | grep ntp看进程是否已杀掉 然后再次ntpdate Ser ...
- linux sigaction 函数 用法释义
使用 sigaction 函数: signal 函数的使用方法简单,但并不属于 POSIX 标准,在各类 UNIX 平台上的实现不尽相同,因此其用途受 到了一定的限制.而 POSIX 标准定义的信号处 ...
- Callable和futrue、ExecutorService的用法
首先说明是为了解决什么问题? 为了解决主线程无谓等待浪费服务器资源的问题.当主线程执行一个费时的操作时,比如客户端发起一个请求,该请求在服务器端处理很复杂,如需要调用其他系统的接口,总之比较耗时.这时 ...
- PHP的数据库连接mysqli遍历示例
$mysqli = mysqli_init(); $mysqli->options(MYSQLI_OPT_CONNECT_TIMEOUT, 2);//设置超时时间,以秒为单位的连接超时时间 $m ...
- 使用postman做接口测试(三)
三,接口用例的设计 个人感觉用例的设计才是重要的哈,网上查了一些资料总结了一下 1.业务流程测试 通过性验证: 1, 按照接口文档上的参数,正常传参,是否可以返回正确的结果 2, 是否满足前提条件,比 ...
- 随机数生成 && 生成执行锁
生成随机数列: openssl rand -base64 uuidgen echo $RANDOM | md5sum echo $RANDOM | sha256sum 随机小写10个字母 随机数: [ ...
- style一张图--openlayers
- Extjs6设置Store、Ajax、form的请求方式(GET、POST)
Extjs6 设置Store.Ajax.form的请求方式(GET.POST) Ajax请求和Form的submit方法设置请求方式和原来一样,使用method : 'POST'设置 // 表单提交 ...