JavaScript实现点击按钮字体放大、缩小

 更新时间:2016年02月29日 12:02:52   作者:rehcf  
字体可以调节大小,极大了满足了用户体验度,接下来通过本文给大家介绍JavaScript实现点击按钮字体放大、缩小实例代码,需要的朋友参考下吧

本文给大家分享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实现点击按钮字体放大、缩小的相关知识就给大家介绍这么多,希望对大家有所帮助!

相关文章

  • 详解js树形控件—zTree使用总结

    详解js树形控件—zTree使用总结

    本篇文章主要介绍了js树形控件—zTree使用总结,树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点.
    2016-12-12
  • js+html制作简单验证码

    js+html制作简单验证码

    这篇文章主要为大家详细介绍了js结合html制作简单验证码的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 鼠标事件延时切换插件

    鼠标事件延时切换插件

    为了防止误操作,很多时候需要对鼠标滑过触发的事件进行延时处理。网易首页的选项卡好几年之前就添加了这个特性,当时我记得是采用150毫秒作为触发基准
    2011-03-03
  • js 本地预览的简单实现方法

    js 本地预览的简单实现方法

    本篇文章主要是对js本地预览的简单实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • Flutter 超实用简单菜单弹出框 PopupMenuButton功能

    Flutter 超实用简单菜单弹出框 PopupMenuButton功能

    这篇文章主要介绍了Flutter 超实用简单菜单弹出框 PopupMenuButton功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • CSS鼠标响应事件经过、移动、点击示例介绍

    CSS鼠标响应事件经过、移动、点击示例介绍

    本文为大家介绍下CSS 鼠标响应事件:鼠标经过CSS、鼠标移动CSS、鼠标点击CSS以及示例,喜欢的朋友可以参考下
    2013-09-09
  • js的touch事件的实际引用

    js的touch事件的实际引用

    研究移动端页面的触屏滑动事件,搜索jquery 的相应技术支持实在繁琐,而js只需几步简单定义即可,下面与大家分享下js的touch事件的实际引用
    2014-10-10
  • 使用canvas实现魔法摄像头的示例代码

    使用canvas实现魔法摄像头的示例代码

    我们用手机的摄像头自拍,很容易实现简单的自拍效果,如复古、黑白等等,其实我们使用web端的JavaScript也是可以实现的,接下来就带领小伙伴实现一个魔法摄像头,并且提供了截图下载功能,需要的朋友可以参考下
    2023-08-08
  • 详解Js模板引擎(TrimPath)

    详解Js模板引擎(TrimPath)

    本文详细介绍了在页面中引用template.js文件之后,具体的使用方法及实例,有需要的朋友可以参考下
    2016-11-11
  • firefox TBODY 用js显示和隐藏时出现错位的解决方法

    firefox TBODY 用js显示和隐藏时出现错位的解决方法

    今天帮别人写一个网页,发现:当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面,很是诧异。
    2008-12-12

最新评论