Question

检查一下 http://heroku.com/

你是如何创造这样的东西的？（指的是滑动）你有javascript的鼠标悬停事件还是全部是css？有人请给我一个基本的大纲？

Answer 1

简单的jQuery。查看来源以了解如何

Answer 2

我使用这个jQuery手风琴小部件。它具有鼠标悬停效果，如heroku.com上的那个

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

Answer 3

如果您不需要加载整个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';
   }
}

你如何创建像这样的滑动效果？

3 个答案: