仿淘宝 首页的 "滑动门" 鼠标悬浮滑动box效果

    .boxcaption{  
        float: left;  
        position: absolute;  
        background: #000;  
        height: 100px;  
        width: 100%;  
        opacity: .8;  
        /* For IE 5-7 */  
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
        /* For IE 8 */  
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
        }  

 

    .boxgrid{  
        width: 325px;  
        height: 260px;  
        margin:10px;  
        float:left;  
        background:#161613;  
        border: solid 2px #8399AF;  
        overflow: hidden;  
        position: relative;  
    }  
    .boxgrid img{  
        position: absolute;  
        top: 0;  
        left: 0;  
        border: 0;  
    }  

 

    .captionfull .boxcaption {  
        top: 260;  
        left: 0;  
    }  
    .caption .boxcaption {  
        top: 220;  
        left: 0;  
    }  

 

    $(document).ready(function(){  
        //To switch directions up/down and left/right just place a "-" in front of the top/left attribute  
        //Vertical Sliding  
        $('.boxgrid.slidedown').hover(function(){  
            $(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});  
        }, function() {  
            $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});  
        });  
        //Horizontal Sliding  
        $('.boxgrid.slideright').hover(function(){  
            $(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});  
        }, function() {  
            $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});  
        });  
        //Diagnal Sliding  
        $('.boxgrid.thecombo').hover(function(){  
            $(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});  
        }, function() {  
            $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});  
        });  
        //Partial Sliding (Only show some of background)  
        $('.boxgrid.peek').hover(function(){  
            $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});  
        });  
        //Full Caption Sliding (Hidden to Visible)  
        $('.boxgrid.captionfull').hover(function(){  
            $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});  
        });  
        //Caption Sliding (Partially Hidden to Visible)  
        $('.boxgrid.caption').hover(function(){  
            $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});  
        }, function() {  
            $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});  
        });  
    });  

 

    <div class="boxgrid captionfull">  
        <img src="jareck.jpg"/>  
        <div class="cover boxcaption">  
            <h3>Jarek Kubicki</h3>  
            <p>Artist<br/><a href="<a class="linkification-ext" title="Linkification: http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/">http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/</a>" target="_BLANK">More Work</a></p>  
        </div>  
    </div>  

 DEMO 见:http://s3.amazonaws.com/buildinternet/live-tutorials/sliding-boxes/index.htm

 

http://buildinternet.com/project/mosaic/1.0/

 

http://www.luidea.com/jsplugins/jsactions/20111062.html