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 ...
随机推荐
- c++模板函数作为参数的疑惑
为什么22行只能传一个模板函数作为参数,而非模板却编译失败,求解释.
- 【leetcode 简单】 第一百零八题 找到所有数组中消失的数字
给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不 ...
- 24、List三个子类的特点
List的三个子类的特点 因为三个类都实现了List接口,所以里面的方法都差不多,那这三个类都有什么特点呢? ArrayList:底层数据结构是数组,查询快,增删慢.线程不安全,效率高. Vector ...
- 9、StringBuffer和StringBuilder
StringBuffer简介 StringBuffer是一个字符串缓冲区,如果需要频繁的对字符串进行拼接时,建议使用StringBuffer.工作原理StringBuffer的底层是char数组,如果 ...
- JS获取元素内容属性以及修改
1.通过document对象
- webpack4.5.0+vue2.5.16+vue-loader 实战组件化开发案例以及版本问题中踩的一些大坑!!!
一 vue-loader 我们先不管脚手架,只说vue-loader,简单讲就是可将.vue文件打包,实现组件化开发,即一个.vue文件就是一个组件,开发中只需要引入这个.vue组件就可以了! 然后. ...
- 利用Mysql5.7的新特性实现多机房高可用架构【转】
再牛逼的架构也敌不过挖掘机,无论单机房内你的架构多么的高可用,多么的完善,当挖掘机挖下去那一瞬间,都是扯蛋,楼主所在的公司也被挖掘机挖断过光纤.电力线. 为什么大家都在谈论服务冗余,缓存击穿等高可用时 ...
- ETL利器Kettle实战应用解析系列二
本系列文章主要索引如下: 一.ETL利器Kettle实战应用解析系列一[Kettle使用介绍] 二.ETL利器Kettle实战应用解析系列二 [应用场景和实战DEMO下载] 三.ETL利器Kettle ...
- 关于bcb调用动态库,contains invalid OMF record, type 0x21 (possibly COFF)问题
今天用C++Builder6.0 调用三方lib文件时,编译的时候出现如下错误: “contains invalid OMF record, type 0x21 (possibly COFF)” 才知 ...
- java基础64 JavaScript中的Arrays数组对象和prototype原型属性(网页知识)
1.Arrays数组对象的创建方式 方式一: var 变量名=new Array(); //创建一个长度为0的数组. 方式二: var 变量名=new Array(长度); //创建一个指定长度的数组 ...