图片放大 jquery代码手写

html代码

<div style="width: 100%;height: 100%;">

 <img src="/{$i.pic1}" width="50px " height="50px" class="middle_small"  style="float: left;margin: 0px 5px;"  >

<img src="/{$i.pic1}" style="display: none;position: absolute;max-width:400px;max-height:400px;top: 50px;z-index: 999;left: -254px;" class="middle_big" >
                      

   </div>

jquery代码

  <script type="text/javascript">
                  $(function(){
                      $(".middle_small").mouseover(function(){
                            $('.middle_big').hide();
                            $(this).siblings('img').css({'display':'block'});
                        })  
                      $(".middle_small").mouseout(function(){
                           $(this).siblings('img').css({'display':'none'}); 
                      })


                      $(".middle_big").mouseover(function(){
                            $(this).show()
                      })
                      $(".middle_big").mouseout(function(){
                            $(this).hide()
                      })
                  })
                        




                  </script>