index.jsp

     
        
      
            
                   
       
                
        
         Me
        
                
        
         2016/5/22
        
            
       
        
      
        
      
            
                   
       
                
        
         Me
        
                
        
         2016/5/23
        
            
       
        
      
        
      
            
                   
       
                
        
         Me
        
                
        
         2016/5/24
        
            
       
        
      
    
     

 

my.js

$(document).ready(function(){    /*$("div.photo").each(function(index){        $(this).hover(function(){            var $left=$(this).offset().left+120;            var $top=$(this).offset().top-150;            $(this).find(".details").fadeTo(1000,1.0).css({left:$left,top:$top,});            $(this).fadeTo(1000,0.5);        },function(){            $(this).find(".details").fadeTo(1000,0);            $(this).fadeTo(200,1.0);        });    });*/        /*$("div.photo").on("mouseenter mouseleave",function(event){        var $details=$(this).find(".details");        var $left=$(this).offset().left+120;        var $top=$(this).offset().top-150;        if(event.type=="mouseenter"){            $details.toggleClass("showtime",event.type=="mouseenter");            $details.fadeTo(1000,1.0).css({left:$left,top:$top,});            $(this).fadeTo(1000,0.5);        }        else{            $details.fadeOut("fast");            $(this).fadeTo(200,1.0);        }    });*/        //jquery中的事件委托    $("#gallery").on("mouseenter mouseleave","div.photo",function(event){        var $details=$(this).find(".details");//this是div.photo        var $top=$("div.photo").offset().top-30;        var $left=$details.closest("div.photo").offset().left+220;        if(event.type=="mouseenter"){            $details.fadeTo("fast",1.0).css({top:$top,left:$left});            $details.closest("div.photo").find("img").css({opacity:0.5});        }        else{            $details.fadeOut("fast");            $details.closest("div.photo").find("img").css({opacity:1.0});        }    });   });

 

 

css.css

.photo{
       display:inline;}img{
       width:300px;    height:200px;}.details{
       position:absolute;    display:none;    color:#fff;}.showtime{
       border:2px solid #aaa;}