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 相关文章推荐
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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 数据库字段复用的基本原理与示例
2011/07/22 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
实习教师自我鉴定
2013/09/27 职场文书
心得体会开头
2014/01/01 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
我的中国梦主题班会
2015/08/14 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
Python合并pdf文件的工具
2021/07/01 Python