第四讲 jQuery中的事件与动画

 
第四讲 jQuery中的事件与动画
        今天讲的就是传说中jQuery很神奇的地方（至少本人是这样认为的，因为通过这章的学习，我真正做到了让网
页动起来的效果），好了废话也不说了，进入今天的正题吧
        

一． 事件。

事件：Jquery中的事件跟传统的Javascript事件类似。（去掉on即可）

 

事件的使用方法：

第一种方式：使用关键字bind（“事件名”，函数）；

例如：

$(“p”).bind(“click”,function(){

    //我是p标签的click事件哦！

});

 

第二种方式：直接使用事件调用函数。

例如：

$(“p”).click(function(){

    //我是p标签的click事件哦！

});

 

注：取消事件的绑定使用unbind（“事件名”）；

 

强大的合成事件：

hover（）；—— （mouseover、mouseout事件的合成体）

toggle（）；—— （click事件的合成体（可以根据点击次数，调用不同的函数））

注：toggle（）至少写两个或以上的函数；否则toggle（）会变成动画函数。

one（） —— （bind事件的合成体（只会执行一次点击事件））

 

获取事件对象的属性

可以通过事件获取对象的相关属性：

$(“p”).click(function( e ){//e 类似js中的event

    //我是p标签的click事件哦！

    //e 常用属性：

type（表示获取当前事件名）

target （触发事件的目标元素）（可以通过目标元素“.属性”的方式获取或设置属性的值）

preventDefault（）阻止默认行为。（非常重要）

pageX、pageY—— 返回鼠标当前页面中的坐标。

});

 

事件冒泡机制：

存在父子关系的时候，点击子元素时，会触发父元素中的事件——称为事件的冒泡。

阻止事件的冒泡：使用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>&nbsp;&nbsp;<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>

posted on 2012-11-05 09:47  somewhere!  阅读(190)  评论(0)  编辑  收藏  举报

导航