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 相关文章推荐
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 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
与数据库连接
2006/10/09 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
js prototype截取字符串函数
2010/04/01 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
pandas 将索引值相加的方法
2018/11/15 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
详解rem 适配布局
2018/10/31 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
行政文员岗位职责
2015/02/04 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
业务员岗位职责范本
2015/04/03 职场文书
经典祝酒词大全
2015/08/12 职场文书
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技