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抽奖转盘实现方法分析

    js抽奖转盘实现方法分析

    这篇文章主要介绍了js抽奖转盘实现方法,结合实例形式分析了js抽奖转盘原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • js获取浏览器和屏幕的各种宽度高度

    js获取浏览器和屏幕的各种宽度高度

    本文主要介绍了js获取浏览器和屏幕的各种宽度高度的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript组合模式---引入案例分析

    JavaScript组合模式---引入案例分析

    这篇文章主要介绍了JavaScript组合模式,结合具体案例形式分析了JavaScript组合模式定义、应用与相关操作注意事项,需要的朋友可以参考下
    2020-05-05
  • webpack中的代理配置详解

    webpack中的代理配置详解

    本文主要介绍了webpack中的代理配置详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 12个非常实用的JavaScript小技巧【推荐】

    12个非常实用的JavaScript小技巧【推荐】

    下面小编就为大家带来一篇12个非常实用的JavaScript小技巧【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js 加载并解析XML字符串的代码

    js 加载并解析XML字符串的代码

    js 加载并解析XML字符串的实现代码,需要的朋友可以参考下。
    2009-12-12
  • JS实现网站吸顶条

    JS实现网站吸顶条

    这篇文章主要为大家详细介绍了JS制作网站吸顶条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JavaScript字符串截取方法总结(slice、substring、substr等)

    JavaScript字符串截取方法总结(slice、substring、substr等)

    在开发中常常会需要截取字符串,而 JavaScript 提供了很多种方法实现截取操作,本文对各种方法做个整理,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • JavaScript插件化开发教程 (四)

    JavaScript插件化开发教程 (四)

    这篇文章主要介绍了JavaScript插件化开发教程第四篇,需要的朋友可以参考下
    2015-01-01
  • js控制浏览器全屏示例代码

    js控制浏览器全屏示例代码

    控制浏览器全屏的方法有很多,下面为大家介绍下js是如何做到的
    2014-02-02

最新评论