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实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
javascript实现密码验证
Nov 10 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
微信小程序实现form表单本地储存数据
Jun 27 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
vue中实现回车键登录功能
Feb 19 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 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
客户端静态页面玩分页
2006/06/26 Javascript
Add a Formatted Table to a Word Document
2007/06/15 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Django查询数据库的性能优化示例代码
2017/09/24 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python中return的返回和执行实例
2019/12/24 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
安全检查验收制度
2014/01/12 职场文书
企业晚会策划方案
2014/05/29 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript
Docker官方工具docker-registry案例演示
2022/04/13 Servers