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 相关文章推荐
Javascript 错误处理的几种方法
Jun 13 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
javascript的BOM
May 03 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
在vue中使用Autoprefixed的方法
Jul 27 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 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
咖啡与水的关系
2021/03/03 冲泡冲煮
关于PHP语言构造器介绍
2013/07/08 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
accesskey 提交
2006/06/26 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
pycharm永久激活超详细教程
2020/10/29 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
String和StringBuffer的区别
2015/08/13 面试题
出国留学担保书
2014/05/20 职场文书
高三霸气励志标语
2014/06/24 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers