JavaScript实现点击按钮字体放大、缩小


Posted in Javascript onFebruary 29, 2016

本文给大家分享js实现点击按钮字体放大缩小实例代码,代码简单易懂,需要的朋友参考下吧

具体代码如下所示:

<style>
.bb{color:red;}
.cc{color:green;}
.chapter {font-size: 1.5em;}
.normal{font-size:12px;}
.hidden{display:none;}
</style>
<script>
$(document).ready(function() {
$('div.aa').addClass('bb');
$('a[href^="http:"]').addClass('cc');
//$('#switcher-large').on('click',function(){
// $('div.large').addClass('chapter'); 
//});
$('#switcher-large').click(function(){ 
$('div.large').toggleClass('chapter');
$(this).toggleClass('bb'); 
});
//$('#switcher').click(function(){//点击按钮增加(移除)样式(toggleClass方法)
//$('#switcher button').toggleClass('hidden');
//})
//字体的放大缩小
var $biger = $('div.large');
var num = parseFloat($biger.css('fontSize')); 
$('#switcher-bigger').click(function(){ 
num=num*1.4;
$biger.css('fontSize',num+'px');
});
$('#switcher-small').click(function(){
num=num/1.4;
$biger.css('fontSize',num+'px');
});
});
</script>
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default"> Default </button>
<button id="switcher-hidden">Narrow hidden</button>
<button id="switcher-large">Large Print</button>
<button id="switcher-bigger">switcher-bigger</button>
<button id="switcher-small">switcher-small</button>
</div>
<div class="large">
<p>三水点靠木</p>
<p>三水点靠木</p>
<p>三水点靠木</p>
<p>三水点靠木</p>
</div>

关于JavaScript实现点击按钮字体放大、缩小的相关知识就给大家介绍这么多,希望对大家有所帮助!

Javascript 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
JavaScript手风琴页面制作
May 17 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
Puppet的一些技巧
Sep 17 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
jquery trigger函数执行两次的解决方法
Feb 29 #Javascript
理解js回收机制通俗易懂版
Feb 29 #Javascript
jquery trigger实现联动的方法
Feb 29 #Javascript
基于Javascript实现返回顶部按钮
Feb 29 #Javascript
JavaScript实现斗地主游戏的思路
Feb 29 #Javascript
jQuery取消特定的click事件
Feb 29 #Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 #Javascript
You might like
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
layui表格数据重载
2019/07/27 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python中defaultdict的用法详解
2017/06/07 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
用python发送微信消息
2020/12/21 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
服装厂厂长职责
2013/12/16 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
提拔干部考察材料
2014/05/26 职场文书