Jquery 实现HTML 文本字体 大小 切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>effects</title><link rel="stylesheet" href="gettysburg.css" type="text/css" media="screen" /><script src="jquery.js" type="text/javascript"></script><script type="text/javascript" src="gettysburg.js"></script></head><body> <div id="container"> <h2>Abraham Lincoln's Gettysburg Address</h2><div id="switcher"> <div name="code">/*************************************** =default styles************************************** */html, body { margin: 0; padding: 0;}body { font: 62.5% Verdana, Helvetica, Arial, sans-serif; color: #000; background: #fff;}#container { font-size: 1.2em; margin: 10px 2em;}h1 { font-size: 2.5em; margin-bottom: 0;}h2 { font-size: 1.3em; margin-bottom: .5em;}h3 { font-size: 1.1em; margin-bottom: 0;}code { font-size: 1.2em;}a { color: #06581f;}/***************************************=Aslett Clearing Method for floats ************************************** */.clear-after:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }.clear-after {display: inline-block;}/* backslash hack hides from IE Mac \*/* html .clear-after {height: 1%;}.clear-after {display: block;}/* end backslash hack *//*************************************** =chapter styles************************************** */.hover { cursor: pointer; background: #ffc;}#switcher { position: relative; width: 300px; padding: .5em; border: 1px solid #777;}.label { width: 130px; margin: .5em 0;}.button { width: 140px; padding: 5px; margin: .5em 0; border: 1px solid #e3e3e3; position: relative;}#brave { position: relative;}.bordered { border: 1px solid #999; padding: 1%; margin-right: 1%;}.more { clear: left;}?$(document).ready(function() { var $speech = $('div.speech'); var defaultSize = $speech.css('fontSize'); $('#switcher button').click(function() { var num = parseFloat( $speech.css('fontSize'), 10 ); switch (this.id) { case 'switcher-large': num *= 1.4; break; case 'switcher-small': num /= 1.4; break; default: num = parseFloat(defaultSize, 10); } // if (this.id == 'switcher-large') { // num *= 1.4; // } else if (this.id == 'switcher-small') { // num /= 1.4; // } $speech.animate({fontSize: num + 'px'}, 'slow'); });});// $(document).ready(function() {// var $firstPara = $('p:eq(1)');// $firstPara.hide(); // $('a.more').click(function() {// if ($firstPara.is(':hidden')) {// $firstPara.fadeIn('slow'); // $(this).text('read less');// } else {// $firstPara.fadeOut('slow');// $(this).text('read more');// }// return false;// });// });$(document).ready(function() { var $firstPara = $('p:eq(1)'); $firstPara.hide(); $('a.more').click(function() { $firstPara.slideToggle('slow'); var $link = $(this); if ( $link.text() == "read more" ) { $link.text('read less'); } else { $link.text('read more'); } return false; });});// $(document).ready(function() {// // var $firstPara = $('p:eq(1)');// $firstPara.hide();// $('a.more').click(function() {// var $link = $(this);// $firstPara.animate({// opacity: 'toggle',// height: 'toggle'// }, // 'slow'// );// if ( $link.text() == "read more" ) {// $link.text('read less'); // } else {// $link.text('read more');// }// return false;// });// // });// $(document).ready(function() {// $('div.label').click(function() {// var paraWidth = $('div.speech p').outerWidth();// var $switcher = $(this).parent();// var switcherWidth = $switcher.outerWidth();// $switcher.animate({// 'left': paraWidth - switcherWidth, // height: '+=20px', // borderWidth: '5px'// }, 'slow');// // });// });// $(document).ready(function() {// $('div.label').click(function() {// var paraWidth = $('div.speech p').outerWidth();// var $switcher = $(this).parent();// var switcherWidth = $switcher.outerWidth();// $switcher// .animate({left: paraWidth - switcherWidth}, 'slow')// .animate({height: '+=20px'}, 'slow')// .animate({borderWidth: '5px'}, 'slow');// });// });$(document).ready(function() { $('div.label').click(function() { var paraWidth = $('div.speech p').outerWidth(); var $switcher = $(this).parent(); var switcherWidth = $switcher.outerWidth(); $switcher .fadeTo('fast',0.5) .animate({ 'left': paraWidth - switcherWidth }, 'slow') .fadeTo('slow',1.0) .slideUp('slow', function() { $switcher .css('backgroundColor', '#f00'); }) .slideDown('slow'); });});// $(document).ready(function() {// $('p:eq(2)')// .css('border', '1px solid #333')// .click(function() {// $(this).slideUp('slow')// .next().slideDown('slow');// });// $('p:eq(3)').css('backgroundColor', '#ccc').hide();// }); $(document).ready(function() { var $thirdPara = $('p:eq(2)'); $thirdPara .css('border', '1px solid #333') .click(function() { $(this).next().slideDown('slow',function() { $thirdPara.slideUp('slow'); }); }); $('p:eq(3)').css('backgroundColor', '#ccc').hide();});// Make clickable elements appear so on hover.$(document).ready(function() { $('h2, div.button, div.label, span.more').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });});