jQuery鼠标经过放大动画效果

前提链接：<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

HTML结构：

<div class="wrap">
   <div class="lefttop f">A</div>
   <div class="leftbot f">B</div>
   <div class="right f">C</div>
</div>

CSS代码：

.f { font:bold 24px/200px "新宋体"; color:#fff; text-align:center;}
.wrap { width:405px; height:405px; margin:0 auto; position:relative;top:120px;}
.lefttop { width:200px; height:200px; background:#f00; position:absolute; left:0; top:0;}
.leftbot { width:200px; height:200px; background:#f00; position:absolute; left:0; bottom:0;}
.right { width:200px; height:405px; background:#f00; position:absolute; right:0; top:0;}

jQuery代码：

$(document).ready(function(){
          $(".lefttop").hover(function(){
             $(this).css({zIndex:"50",background:"#ff0",color:"#000"}).animate({width:"405px",height:"405px"},"speed")
            },
             function(){
             $(this).css({zIndex:"0",background:"#f00",color:"#fff"}).animate({width:"200px",height:"200px"},"speed")
             })
          $(".leftbot").hover(function(){
             $(this).css({zIndex:"50",background:"#ff0",color:"#000"}).animate({width:"405px",height:"405px"},"speed")
             },
             function(){
             $(this).css({zIndex:"0", background:"#f00",color:"#fff"}).animate({width:"200px",height:"200px"},"speed")
             })
          $(".right").hover(function(){
             $(this).css({zIndex:"50",background:"#ff0",color:"#000"}).animate({width:"405px",height:"405px"},"speed")
            },
            function(){
             $(this).css({zIndex:"0",background:"#f00",color:"#fff"}).animate({width:"200px",height:"405px"},"speed")
          })
     })

 

 

转载于:https://www.cnblogs.com/pqw1991/archive/2012/08/30/2663343.html