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 相关文章推荐
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
PassWord输入框代码分享
Jun 07 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
JS代码实现页面切换效果
Jan 10 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
多重?l件?合查?(一)
2006/10/09 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
薪资那么高的Web前端必看书单
2017/10/13 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
python海龟绘图实例教程
2014/07/24 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python word转pdf代码实例
2019/08/16 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
完美主义个人的自我评价
2014/02/17 职场文书
勤俭节约倡议书
2014/04/14 职场文书
中学生自我评价范文
2015/03/03 职场文书
python实现简单聊天功能
2021/07/07 Python