我正在设计一个静态HTML页面。它有两个输入字段和一个更改按钮。
<form name="formTextBox" method="post">
<span id="departImage">
<img src="images/FlightImg.png">
</span>
<span class="spanInputOne" id="spanInputOneId">
<input type="text" maxlength="5"
class="textBox" id="departTextBox" name="txtDpt" />
</span>
<input type="image" src="images/SwitchMode.png"
class="centerButton" id="changeButton"
onclick="change()" value="change" />
<span id="arrveImage">
<img src="images/FlightImgDown.png">
</span>
<span class="spanInputTwo" id="spanInputTwoId">
<input type="text" maxlength="5"
class="textBox" id="arrivalTextBox" name="txtArr"/>
</span>
</form>
我想要做的是,当点击更改按钮时,文本字段中的值应该交换平均值,而文本框应该可视地移动到另一个框位置。所以我已经包含了css3动画,javascript如下
CSS3
.animation {
position: relative;
animation: swap .5s;
-moz-animation:swap .5s; /* Firefox */
-webkit-animation:swap 1s; /* Safari and Chrome */
}
@-moz-keyframes swap /* Firefox */
{
0% {left:0%; top:0%;}
100% {left:50%; top:0%;}
}
@-webkit-keyframes swap /* Chrome and Safari */
{
0% {left:0%; top:0%;}
100% {left:50%; top:0%;}
}
.animationOne {
position: relative;
animation: swapOne .5s;
-moz-animation:swapOne .5s; /* Firefox */
-webkit-animation:swapOne .5s; /* Safari and Chrome */
}
@-moz-keyframes swapOne /* Firefox */
{
0% {right:0%; top:0%;}
100% {right:48%; top:0%;}
}
@-webkit-keyframes swapOne /* Chrome and Safari */
{
0% {right:0%; top:0%;}
100% {right:48%; top:0%;}
}
的Javascript
function change() {
var depart=document.getElementById("departTextBox").value;
var arrive=document.getElementById("arrivalTextBox").value;
$("span:eq(1)").addClass("animation");
$("span:eq(3)").addClass("animationOne");
document.formTextBox.txtDpt.value = arrive;
document.formTextBox.txtArr.value = depart;
}
文本框的动画效果与预期一致。但是动画完成后文本框值会消失。有人可以帮助我......
答案 0 :(得分:0)
上述项目的问题与<form>, <input type="img">
由于包含了文本框,图像按钮<input type="image" src="images/SwitchMode.png">
,因此会发布值。因此页面刷新,数据无法使用。
我使用了以下代码而非<input type="image" src="images/SwitchMode.png">
,但它确实有效。
<img src="images/SwitchMode.png" alt="Change"
class="centerButton" id="changeButton"
onclick="change()" value="change" />