JavaScript实现点击按钮字体放大、缩小
2016-02-29 12:02
639 查看
本文给大家分享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实现点击按钮字体放大、缩小的相关知识就给大家介绍这么多,希望对大家有所帮助!
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- flash 系统字体显示问题
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- C#及WPF获取本机所有字体和颜色的方法
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 谈谈网页设计中的字体应用Font Set
- PDF里的文字显示模糊的解决方法
- 保证可下载的漂亮动作2008奥运比赛项目字体
- 爆炸式的JS圆形浮动菜单特效代码
- C#实现字体旋转的方法
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效