使用先前的值进行后续函数调用
|
的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函数在被调用时会使用以前的值执行一次,然后使用新值执行。
没有找到相关结果
已邀请:
1 个回复
链眷克袒姜