JQuery效果
Posted myblogou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery效果相关的知识，希望对你有一定的参考价值。
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 // $switcher 172 // .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 // $switcher 185 // .fadeTo(‘fast‘, 0.5) 186 // .animate({ 187 // ‘left‘: paraWidth - switcherWidth 188 // }, 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 // $switcher 205 // .fadeTo(1000, 0.5) 206 // .animate({ 207 // ‘left‘: paraWidth - switcherWidth 208 // }, { ‘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 // $switcher 224 // .fadeTo(1000, 0.5) 225 // .animate({ 226 // ‘left‘: paraWidth - switcherWidth 227 // }, { ‘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 $switcher 248 .fadeTo(‘fast‘, 0.5) 249 .animate({ 250 ‘left‘: paraWidth - switcherWidth 251 }, ‘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 //9 263 //$(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 //10 274 $(document).ready(function () { 275 var $thirdPara = $(‘p:eq(2)‘); 276 $thirdPara 277 .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 Size 305 </div> 306 <button id="switcher-default"> 307 Default 308 </button> 309 <button id="switcher-large"> 310 Bigger 311 </button> 312 <button id="switcher-small"> 313 Smaller 314 </button> 315 </div> 316 <div class="speech"> 317 <p> 318 Fourscore and seven years ago our fathers brought forth on this continent a new 319 nation, conceived in liberty, and dedicated to the proposition that all men are 320 created equal. 321 </p> 322 <p> 323 Now we are engaged in a great civil war, testing whether that nation, or any nation 324 so conceived and so dedicated, can long endure. We are met on a great battlefield 325 of that war. We have come to dedicate a portion of that field as a final resting-place 326 for those who here gave their lives that the nation might live. It is altogether 327 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 above 333 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 have 336 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—that 340 from these honored dead we take increased devotion to that cause for which they 341 gave the last full measure of devotion—that we here highly resolve that these 342 dead shall not have died in vain—that this nation, under God, shall have a 343 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效果的主要内容，如果未能解决你的问题，请参考以下文章