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 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
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
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
javascript基础知识讲解
2017/01/11 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
Python输入二维数组方法
2018/04/13 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
如何利用cmp命令比较文件
2013/09/23 面试题
三年级音乐教学反思
2014/01/28 职场文书
检举信的格式及范文
2014/04/04 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
个人党性分析总结
2015/03/05 职场文书
民事诉讼代理词
2015/05/25 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis