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

guangqiang

.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