?1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ?2 ????"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ?3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> ?4 <head> ?5 ????<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ?6 ????<title>effects</title> ?7 ????<script src="jquery.js"></script> ?8 ????<link rel="stylesheet" href="gettysburg.css" type="text/css" media="screen" /> ?9 ????<style> 10 ????????div 11 ????????{ 12 ????????} 13 ????</style> 14 ????<script type="text/javascript"> 15 ????????16 ????????//1修改内联的CSS, .css方法 17 ?????/* ??$(document).ready(function () { 18 ????????????//jQuery变量的声明习惯以$ 19 ????????????var $speech = $(‘div.speech‘); 20 ?????????????21 ????????????var defaultSize = $speech.css(‘fontSize‘); //font-size ?22 ?????????????23 ????????????$(‘#switcher button‘).click(function () { 24 ????????????????25 ????????????????//12.3px 26 ????????????????var num = parseFloat($speech.css(‘fontSize‘), 10); 27 ????????????????28 ????????????????//1.1放大字体和缩小字体功能 29 ????????????????//if (this.id == ‘switcher-large‘) { 30 ????????????????// ???num *= 1.4; 31 ????????????????//} 32 ????????????????//else if (this.id == ‘switcher-small‘) { 33 ????????????????// ???num /= 1.4; 34 ????????????????//} 35 ????????????????//1.2加入默认功能 36 ????????????????switch (this.id) { 37 ????????????????????case ‘switcher-large‘: 38 ????????????????????????num *= 1.4; 39 ????????????????????????break; 40 ????????????????????case ‘switcher-small‘: 41 ????????????????????????num /= 1.4; 42 ????????????????????????break; 43 ????????????????????default: 44 ????????????????????????num = parseFloat(defaultSize, 10); 45 ????????????????} 46 ????????????????//$speech.css(‘fontSize‘, num + ‘px‘); 47 ????????????????////1.3加入动画效果,animate动画。 48 ????????????????$speech.animate({ fontSize: num + ‘px‘ }, ‘slow‘); 49 ????????????}); 50 ????????});*/ 51 ????????52 ????????//2基本的隐藏和显示 53 ????????//$(document).ready(function () { 54 ????????// ???$(‘p:eq(1)‘).hide(); 55 ????????// ???$(‘a.more‘).click(function () { 56 ????????// ???????$(‘p:eq(1)‘).show(); 57 ????????// ???????$(this).hide(); 58 ????????// ???????return false; 59 ????????// ???}); 60 ????????//}); 61 ?62 ?????????63 ????????//3.1效果和速度 64 ????????//$(document).ready(function () { 65 ????????// ???$(‘p:eq(1)‘).hide(); 66 ????????// ???$(‘a.more‘).click(function () { 67 ????????// ???????$(‘p:eq(1)‘).show(‘slow‘); 68 ????????// ???????$(this).hide(); 69 ????????// ???????return false; 70 ????????// ???}); 71 ????????//}); 72 ?????????73 ????????//3.2.淡入fadeIn淡出fadeOut 换到jquery 1.8.2 74 ????????//$(document).ready(function () { 75 ????????// ???$(‘p:eq(1)‘).hide(); 76 ????????// ???$(‘a.more‘).click(function () { 77 ????????// ???????$(‘p:eq(1)‘).fadeIn(2000); //2000 78 ????????// ???????$(this).hide(); 79 ????????// ???????return false; 80 ????????// ???}); 81 ????????//}); 82 ?83 ????????84 ?85 ????????//4复合效果 fadeIn可以调到IE8试一下就行了。 86 ????????//$(document).ready(function () { 87 ????????// ???var $firstPara = $(‘p:eq(1)‘); 88 ????????// ???$firstPara.hide(); 89 ????????// ???$(‘a.more‘).click(function () { 90 ????????// ???????if ($firstPara.is(‘:hidden‘)) { 91 ????????// ???????????//$firstPara.fadeIn(‘slow‘); 92 ????????// ???????????$firstPara.show(‘slow‘); 93 ????????// ???????????//alert($(this).text()); //得到当前对象的文本 94 ????????// ???????????//把a的文本换成read less 95 ????????// ???????????$(this).text("-"); 96 ????????// ???????} 97 ????????// ???????else { 98 ????????// ???????????//$firstPara.fadeOut(3000); 99 ????????// ???????????$firstPara.hide(3000);100 ????????// ???????????$(this).text(‘+‘);101 ????????// ???????}102 ????????// ???????return false;103 ????????// ???});104 ????????//});105 ????????106 ????????//5.sildeToggal方法通过逐渐增加和减少元素的高度来实现显示或隐藏107 ????????//$(document).ready(function () {108 ????????// ???var $firstPara = $(‘p:eq(1)‘);109 ????????// ???$firstPara.hide();110 ????????// ???$(‘a.more‘).click(function () {111 ????????// ???????$firstPara.slideToggle(‘slow‘);112 ????????// ???????var $link = $(this);113 ????????// ???????if ($link.text() == "read more") {114 ????????// ???????????$link.text(‘read less‘);115 ????????// ???????} else {116 ????????// ???????????$link.text(‘read more‘);117 ????????// ???????}118 ????????// ???????return false;119 ????????// ???});120 ????????//});121 122 ????????123 ????????//6自定义动画animate方法的使用，见示例1中最后注释部分，使用animate方法替换css方法124 ????????$(document).ready(function () {125 126 ????????????var $firstPara = $(‘p:eq(1)‘);127 ????????????$firstPara.hide();128 ????????????$(‘a.more‘).click(function () {129 ????????????????var $link = $(this);130 ????????????????$firstPara.animate({131 ????????????????????opacity: ‘toggle‘, //opacity:透明度(调到IE8试一下) 简写属性值‘slow‘,‘hide‘,‘toggle‘：交替132 ????????????????????height: ‘toggle‘133 ????????????????}, ‘slow‘);134 ????????????????if ($link.text() == "read more") {135 ????????????????????$link.text(‘read less‘);136 ????????????????}137 ????????????????else {138 ????????????????????$link.text(‘read more‘);139 ????????????????}140 ????????????????return false;141 ????????????});142 143 ????????});144 ????????145 ????????//7.滑动工具箱(Switcher)146 ????????//$(document).ready(function () {147 ????????// ???$(‘div.label‘).click(function () {148 ????????// ???????//取得演讲词这个div的宽度149 ????????// ???????var paraWidth = $(‘div.speech p‘).outerWidth();150 151 ????????// ???????var $switcher = $(this).parent();152 ????????// ???????//取得switcher转换器宽度153 ????????// ???????var switcherWidth = $switcher.outerWidth();154 ????????// ???????$switcher.animate({155 ????????// ???????????‘left‘: paraWidth - switcherWidth,156 ????????// ???????????height: ‘+=20px‘,157 ????????// ???????????borderWidth: ‘5px‘158 ????????// ???????}, ‘slow‘);159 160 ????????// ???});161 ????????//});162 163 ?????164 ????????//8.并发与排队165 ????????//8.1排队166 ????????//$(document).ready(function () {167 ????????// ???$(‘div.label‘).click(function () {168 ????????// ???????var paraWidth = $(‘div.speech p‘).outerWidth();169 ????????// ???????var $switcher = $(this).parent();170 ????????// ???????var switcherWidth = $switcher.outerWidth();171 ????????// ???????$switcher172 ????????// ???????.animate({ left: paraWidth - switcherWidth }, ‘slow‘)173 ????????// ???????.animate({ height: ‘+=20px‘ }, ‘slow‘)174 ????????// ???????.animate({ borderWidth: ‘5px‘ }, ‘slow‘);175 ????????// ???});176 ????????//});177 ????????178 ????????//8.2加入更多效果179 ????????//$(document).ready(function () {180 ????????// ???$(‘div.label‘).click(function () {181 ????????// ???????var paraWidth = $(‘div.speech p‘).outerWidth();182 ????????// ???????var $switcher = $(this).parent();183 ????????// ???????var switcherWidth = $switcher.outerWidth();184 ????????// ???????$switcher185 ????????// ???????????.fadeTo(‘fast‘, 0.5)186 ????????// ???????????.animate({187 ????????// ???????????????‘left‘: paraWidth - switcherWidth188 ????????// ???????????}, 1000)189 ????????// ???????????.fadeTo(‘slow‘, 1.0)190 ????????// ???????????.slideUp(‘slow‘, function () {191 ????????// ???????????????$switcher.css(‘backgroundColor‘, ‘#f00‘)192 ????????// ???????????})193 ????????// ??????????//194 ????????// ???????????.slideDown(‘slow‘);195 ????????// ???});196 ????????//});197 198 ????????//8.3改变animate参数写法，产生并发199 ????????//$(document).ready(function () {200 ????????// ???$(‘div.label‘).click(function () {201 ????????// ???????var paraWidth = $(‘div.speech p‘).outerWidth();202 ????????// ???????var $switcher = $(this).parent();203 ????????// ???????var switcherWidth = $switcher.outerWidth();204 ????????// ???????$switcher205 ????????// ???????????.fadeTo(1000, 0.5)206 ????????// ???????????.animate({207 ????????// ???????????????‘left‘: paraWidth - switcherWidth208 ????????// ???????????}, { ‘duration‘: ‘slow‘, ‘queue‘: false })209 ????????// ???????????.fadeTo(‘slow‘, 1.0)210 ????????// ???????????.slideUp(‘slow‘)211 ????????// ???????????.css(‘backgroundColor‘, ‘#f00‘)//注此处并未排队212 ????????// ???????????.slideDown(‘slow‘);213 ????????// ???});214 ????????//});215 216 ????????//8.4解决8.3的问题217 ????????//8.4.1利用queue方法218 ????????//$(document).ready(function () {219 ????????// ???$(‘div.label‘).click(function () {220 ????????// ???????var paraWidth = $(‘div.speech p‘).outerWidth();221 ????????// ???????var $switcher = $(this).parent();222 ????????// ???????var switcherWidth = $switcher.outerWidth();223 ????????// ???????$switcher224 ????????// ???????.fadeTo(1000, 0.5)225 ????????// ???????.animate({226 ????????// ???????????‘left‘: paraWidth - switcherWidth227 ????????// ???????}, { ‘duration‘: ‘slow‘, ‘queue‘: false })228 ????????// ???????.fadeTo(‘slow‘, 1.0)229 ????????// ???????.slideUp(‘slow‘)230 ????????// ???????//queue排队231 ????????// ???????.queue(function () {232 ????????// ???????????$switcher .css(‘backgroundColor‘, ‘#f00‘)233 ????????// ???????????//解除排除234 ????????// ???????????.dequeue();235 ????????// ???????})236 ????????// ???????.slideDown(‘slow‘);237 ????????// ???});238 ????????//});239 240 ???????241 ????????//8.4.2利用回调函数242 ????????$(document).ready(function () {243 ????????????$(‘div.label‘).click(function () {244 ????????????????var paraWidth = $(‘div.speech p‘).outerWidth();245 ????????????????var $switcher = $(this).parent();246 ????????????????var switcherWidth = $switcher.outerWidth();247 ????????????????$switcher248 ????????????????.fadeTo(‘fast‘, 0.5)249 ????????????????.animate({250 ????????????????????‘left‘: paraWidth - switcherWidth251 ????????????????}, ‘slow‘)252 ????????????????.fadeTo(‘slow‘, 1.0)253 254 ????????????????.slideUp(‘slow‘)255 ????????????????????//匿名函数就是回调部份256 ????????????????.slideDown(‘slow‘, function () {257 ????????????????????$switcher.css(‘backgroundColor‘, ‘#f00‘);258 ????????????????});259 ????????????});260 ????????});261 ???????262 ????????//9263 ????????//$(document).ready(function () {264 ????????// ???$(‘p:eq(2)‘)265 ????????// ???.css(‘border‘, ‘1px solid #333‘)266 ????????// ???.click(function () {267 ????????// ???????$(this).slideUp(‘slow‘)268 ????????// ???????.next().slideDown(‘slow‘);269 ????????// ???});270 ????????// ???$(‘p:eq(3)‘).css(‘backgroundColor‘, ‘#ccc‘).hide();271 ????????//});272 ??????273 ????????//10274 ????????$(document).ready(function () {275 ????????????var $thirdPara = $(‘p:eq(2)‘);276 ????????????$thirdPara277 ????????????.css(‘border‘, ‘1px solid #333‘)278 ????????????.click(function () {279 ????????????????$(this).next().slideDown(‘slow‘, function () {280 ????????????????????$thirdPara.slideUp(‘slow‘);281 ????????????????});282 ????????????});283 ????????????$(‘p:eq(3)‘).css(‘backgroundColor‘, ‘#ccc‘).hide();284 ????????});285 ???????286 ????????// 11 hover 当鼠标移到对象上时交替的执行两个函数参数.287 ????????$(document).ready(function () {288 ????????????$(‘h2, div.button, div.label, span.more‘).hover(289 ????????????????function () {290 ????????????????????$(this).addClass(‘hover‘);291 ????????????????},292 ????????????????function () {293 ????????????????????$(this).removeClass(‘hover‘);294 ????????????????});295 ????????});296 ?297 ????</script>298 </head>299 <body>300 ????<div id="container">301 ????????<h2>Abraham Lincoln‘s Gettysburg Address</h2>302 ????????<div id="switcher">303 ????????????<div class="label">304 ????????????????Text Size305 ????????????</div>306 ????????????<button id="switcher-default">307 ????????????????Default308 ????????????</button>309 ????????????<button id="switcher-large">310 ????????????????Bigger311 ????????????</button>312 ????????????<button id="switcher-small">313 ????????????????Smaller314 ????????????</button>315 ????????</div>316 ????????<div class="speech">317 ????????????<p>318 ????????????????Fourscore and seven years ago our fathers brought forth on this continent a new319 ????????????????nation, conceived in liberty, and dedicated to the proposition that all men are320 ????????????????created equal.321 ????????????</p>322 ????????????<p>323 ????????????????Now we are engaged in a great civil war, testing whether that nation, or any nation324 ????????????????so conceived and so dedicated, can long endure. We are met on a great battlefield325 ????????????????of that war. We have come to dedicate a portion of that field as a final resting-place326 ????????????????for those who here gave their lives that the nation might live. It is altogether327 ????????????????fitting and proper that we should do this. But, in a larger sense, we cannot dedicate,328 ????????????????we cannot consecrate, we cannot hallow, this ground.329 ????????????</p>330 ????????????<a href="#" class="more">read more</a>331 ????????????<p>332 ????????????????The brave men, living and dead, who struggled here have consecrated it, far above333 ????????????????our poor power to add or detract. The world will little note, nor long remember,334 ????????????????what we say here, but it can never forget what they did here. It is for us the living,335 ????????????????rather, to be dedicated here to the unfinished work which they who fought here have336 ????????????????thus far so nobly advanced.337 ????????????</p>338 ????????????<p>339 ????????????????It is rather for us to be here dedicated to the great task remaining before us—that340 ????????????????from these honored dead we take increased devotion to that cause for which they341 ????????????????gave the last full measure of devotion—that we here highly resolve that these342 ????????????????dead shall not have died in vain—that this nation, under God, shall have a343 ????????????????new birth of freedom and that government of the people, by the people, for the people,344 ????????????????shall not perish from the earth.345 ????????????</p>346 ????????</div>347 ????</div>348 </body>349 </html>JQuery效果
原文地址：https://www.cnblogs.com/myBlogOu/p/9939841.html