第四讲 jQuery中的事件与动画
今天讲的就是传说中jQuery很神奇的地方（至少本人是这样认为的，因为通过这章的学习，我真正做到了让网
页动起来的效果），好了废话也不说了，进入今天的正题吧
一． 事件。 事件：Jquery中的事件跟传统的Javascript事件类似。（去掉on即可）
事件的使用方法： 第一种方式：使用关键字bind（“事件名”，函数）； 例如：
第二种方式：直接使用事件调用函数。 例如：
注：取消事件的绑定使用unbind（“事件名”）；
强大的合成事件： hover（）；—— （mouseover、mouseout事件的合成体） toggle（）；—— （click事件的合成体（可以根据点击次数，调用不同的函数）） 注：toggle（）至少写两个或以上的函数；否则toggle（）会变成动画函数。 one（） —— （bind事件的合成体（只会执行一次点击事件））
获取事件对象的属性 可以通过事件获取对象的相关属性：
事件冒泡机制： 存在父子关系的时候，点击子元素时，会触发父元素中的事件——称为事件的冒泡。 阻止事件的冒泡：使用return fasle；
二． 动画。（详细见手册吧） 基本动画：show()/hide()/toggle() fadeOut()/fadeIn() /fadeTo() slideDown()/slideUp()/slideToggle() 自定义动画：animate() 实例1--滚动图片： |
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.4.1.js"></script> <script type="text/javascript"> $(function(){ $("#Layer1").prev().children(":eq(1)").mouseover(function(){ $("#Layer1").stop().animate({marginLeft:"-445"},1000); }); $("#Layer1").prev().children(":eq(0)").mouseover(function(){ $("#Layer1").stop().animate({marginLeft:"0"},1000); }) $(".clickDiv").find("a").click(function(){ if(parseInt($("#Layer1").css("marginLeft"))<-100){ $("#Layer1").stop().animate({marginLeft:"0"},1000); }else{ $("#Layer1").stop().animate({marginLeft:"-445"},1000); } }); }); </script> <style type="text/css"> #Layer1 { position:absolute; left:1px; top:36px; width:890px; height:213px; } img{ width:140px; height:160px; } ul li{ list-style:none; } #Layer2 { position:absolute; left:293px; top:80px; width:445px; height:235px; font-size:12px; overflow:hidden;//关键代码 } .show{ width:11px; height:11px; background-color:#6666CC; margin-left:5px; float:left; cursor:pointer; } .clickDiv{ width:100%; line-height:25px; text-align:right; } a{ text-decoration:none; } </style> </head> <body> <div id="Layer2"> <div class="clickDiv"> <div class="show"></div> <div class="show"></div> <a href="#">上</a> <a href="#">下</a> </div> <div id="Layer1"> <table width="100%" height="114" border="0" cellpadding="0" cellspacing="0" style="text-align:center;"> <tr> <td><img src="Images/1312380692160.jpg" /></td> <td><img src="Images/1312380698415.jpg" /></td> <td><img src="Images/1318724200670.jpg" /></td> <td><img src="Images/1320985559950.jpg" /></td> <td><img src="Images/1321234726783.jpg" /></td> <td><img src="Images/1317094355348.jpg" /></td> </tr> </table> </div> </div> </body> </html> 实例2--菜单： <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.4.1.js"></script> <script type="text/javascript"> $(function(){ $("#Layer2").hover(function(e){ $(this).stop().animate({left:"51"}); $("#Layer5").stop().fadeTo(1,1000); },function(){ $(this).stop().animate({left:"43"},10); $("#Layer5").stop().fadeOut(10); }); $("#Layer3").hover(function(e){ $(this).stop().animate({left:"51"}); $("#Layer4").stop().fadeTo(1,1000); },function(){ $(this).stop().animate({left:"43"},10); $("#Layer4").stop().fadeOut(10); }); $("#Layer6").hover(function(e){ $(this).stop().animate({left:"51"}); $("#Layer7").stop().fadeTo(1,1000); },function(){ $(this).stop().animate({left:"43"},10); $("#Layer7").stop().fadeOut(10); }); }); </script> <style type="text/css"> #Layer2 { position:absolute; left:43px; top:37px; width:260px; height:106px; } #Layer3 { position:absolute; left:43px; top:152px; width:260px; height:104px; } #Layer4 { position:absolute; left:260px; top:0px; width:310px; height:336px; overflow:hidden; display:none; } #Layer5 { position:absolute; left:260px; top:0px; width:310px; height:336px; overflow:hidden; display:none; } #Layer6 { position:absolute; left:43px; top:266px; width:260px; height:106px; } #Layer7 { position:absolute; left:260px; top:-229px; width:310px; height:336px; overflow:hidden; display:none; } div{ background-color:#FFCCFF; cursor:pointer; } </style> </head> <body> <div id="Layer2">1<div id="Layer5">4</div> </div> <div id="Layer3">2<div id="Layer4">3</div> </div> <div id="Layer6">5 <div id="Layer7">6</div> </div> </body> </html>