Javascript 使用先前值的后续函数调用
CSSJavascript 使用先前值的后续函数调用,javascript,iphone,web-applications,mobile-webkit,Javascript,Iphone,Web Applications,Mobile Webkit,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:
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>
1下一步
第2条
3下一步
4下一步
我试图创建滑动面板,但调用此javascript函数时,会使用以前的值执行一次,然后使用新值执行一次。这种菜单称为水平手风琴。jQuery有无数的简单插件——为什么要重新发明轮子呢?有很多例子: 示例