字体可以调节大小,极大了满足了用户体验度,接下来通过本文给大家介绍 JavaScript 实现点击按钮字体放大、缩小实例代码,需要的朋友参考下吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家分享 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>
- phperz
- </p>
- <p>
- phperz
- </p>
- <p>
- phperz
- </p>
- <p>
- phperz
- </p>
- </div>
关于 JavaScript 实现点击按钮字体放大、缩小的相关知识就给大家介绍这么多,希望对大家有所帮助!
来源: http://www.phperz.com/article/17/0218/266911.html