如何创建这样的幻灯片效果?

http://jqueryui.com/demos/accordion/#mouseover

简单的jQuery。

如果不需要加载整个jQuery库,请尝试此操作。 A simple div slide down JS script

function doSlide(id){
    timeToSlide = 50; // in milliseconds
    obj = document.getElementById(id);
    if(obj.style.display == "none"){ // if it's allready hidden we slide it down
       obj.style.visibility = "hidden";
       obj.style.display = "block";
       height = obj.offsetHeight;
       obj.style.height="0px";
       obj.style.visibility = "visible";
       slideDown(obj,0,height,Math.ceil(height/timeToSlide));
    } else {
       slideUp(obj,Math.ceil(obj.offsetHeight/timeToSlide),obj.offsetHeight);
    }
}

function slideDown(obj,offset,full,px){
    if(offset < full){
       obj.style.height = offset+"px";
       offset=offset+px;
       setTimeout((function(){slideDown(obj,offset,full,px);}),1);
    } else {
       obj.style.height = full+"px"; //If the data inside is updated on runtime you can use auto instead...
    }
}

function slideUp(obj,px,full){
   if((obj.offsetHeight-px) > 0){
      obj.style.height = obj.offsetHeight-px+"px";
      setTimeout((function(){slideUp(obj,px,full);}),1);
   } else {
      obj.style.height=full+"px"; // we reset the height if we were to slide it back down
      obj.style.display = 'none';
   }
}