jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第8章.pptVIP

8.4 应用实例 8.4.1 动态控制页面字体大小 8.4.2 快捷切换网页显示样式 8.4.1 动态控制页面字体大小 本节介绍的实例可以通过按钮动态控制页面中字体的缩放。在网页中定义一个p元素，用于演示字体的缩放，定义代码如下： p请注意字体的变化/p 定义一个“放大字体”按钮，定义代码如下： button class=increaseFont放大字体/button 单击“放大字体”按钮的处理代码 $(.increaseFont).click(function(){ var currentFontSize= $(html).css(font-size); var currentFontSizeNum= parseFloat(currentFontSize, 10); var newFontSize= currentFontSizeNum*1.2; $(html).css(font-size, newFontSize); return false; }); 定义一个“缩小字体”按钮 定义一个“缩小字体”按钮，定义代码如下： button class=decreaseFont缩小字体/button 单击“缩小字体”按钮的处理代码如下： $(.decreaseFont).click(function(){ var currentFontSize= $(html).css(font-size); var currentFontSizeNum= parseFloat(currentFontSize, 10); var newFontSize= currentFontSizeNum*0.8; $(html).css(font-size, newFontSize); return false; }); 定义一个“重置”按钮 定义一个“重置”按钮，定义代码如下： button class=resetFont重置/button 单击“重置”按钮的处理代码如下： $(document).ready(function() { // Reset the font size(back to default) var originalFontSize= $(html).css(font-size); $(.resetFont).click(function(){ $(html).css(font-size, originalFontSize); }); …… }); 本节介绍的实例可以通过超链接快捷地切换网页显示样式。本实例定义了styles1.css、styles2.css和styles3.css等3个样式文件。styles1.css的代码如下： body, html { height: 100%; margin: 0; font-family : Arial, Helvetica, sans-serif; } body { background: #e0e0e0; color: #333; font-size: 76%; padding: 20px; } #st2, #st3 { display: none; } styles2.css的代码 body, html { height: 100%; margin: 0; font-family : Arial, Helvetica, sans-serif; } body { background: #000; color: #fff; font-size: 76%; padding: 20px; } ? #st1, #st3 { display: none; }} styles3.css的代码 body, html { height: 100%; margin: 0; font-family : Arial, Helvetica, sans-serif; } body { background: #fff; color: #000; font-size: 76%; padding: 20px; } #st1, #st2 { display: none; } 定义styles1.css为默认样式表，styles2.c