0

CSS 

body{  
  background:#000;   
  width:320px;  
 height:480px;  
}  

.view  
{  
   width:320px;   
   height:480px;   
   background:#0066CC;  
   overflow:hidden;  
   visibility:hidden;  
   position:absolute;   
   left:0;top:0;  
   z-index:8; 
}  

.o{background:#FF9900;}   

.main{ visibility:visible;}  

.swapper {
  width:640px;  
 height:480px;   
  overflow:hidden;   
  position:absolute;  
   left:0;top:0;  
  visibility:hidden;  
  z-index:9;
 }  
 .on{position:static; float:left; visibility:visible;}  

 .btn {height:50px; width:125px; font-size:16px; background:#000; color:#FFF;}

JavaScript

function $(id)
{
    return document.getElementById(id);
}

function clean()
{
        alert("1");
        ele = $("swapper");
        ele.removeEventListener("webkitTransitionEnd" , clean , true);
        //ele.style.webkitTransition = "height 0s";
        ele.style.webkitTransform = "translate3d(0px,0,0)";
        ele.zIndex = "7";
        ele.style.visibility = "hidden";
        //currentView = nextView;

}
function show(current , next)
{

    alert(current+ "    " + next);
    //nextView = next;
    s = $("swapper");
    s.innerHTML = "";
    nel = $(next);
    cel = $(current);
    v1 = cel.cloneNode(true);v2 = nel.cloneNode(true);

    v1.id = "v1";  v1.onclick = ""; v1.className += " on";
    v2.id = "v2";  v2.onclick = ""; v2.className += " on";

    s.appendChild(v1);  s.appendChild(v2);
    s.style.webkitTransition = "-webkit-transform 1s ease";

    s.style.zIndex = "9";
    s.style.visibility = "visible";
    nel.style.visibility = "visible";
    cel.style.visibility = "hidden";



    //s.style.left = "0px";
    s.addEventListener("webkitTransitionEnd" , clean, true);
    s.style.webkitTransform = "translate3d(-320px,0,0)";
    //setTimeout(clean , 1000);
}

HTML

<div id="swapper" class="swapper"></div>

<div id="container">
    <div id="set1">
        <div id="main" class="view main o"><h1>1</h1><span class="btn" onclick="show('main','2');">Next</span></div>
        <div id="2" class="view"><h1>2</h1><span class="btn" onclick="show('2','3');">Next</span></div>
        <div id="3" class="view o"><h1>3</h1><span class="btn" onclick="show('3','4');">Next</span></div>
        <div id="4" class="view"><h1>4</h1><span class="btn" onclick="show('4','main');">Next</span></div>
    </div>
</div>

</body>

我正在尝试创建滑动面板，但是调用此 javascript 函数时会使用以前的值执行一次，然后使用新值执行。

4

1 回答 1

1

这种菜单称为水平手风琴。jQuery 有无数简单的插件——为什么要重新发明轮子？许多可用的示例：

例子

于 2011-04-15T09:10:18.770 回答