我需要让一个彩色 div 水平向右移动,当它到达边缘时,它的大小应该加倍,绕中心旋转的速度应该是两倍。
var topPosition = 50;
var leftPosition = 250;
var rightPosition = 800;
function move(){
var go = document.getElementById("box");
go.style.left = leftPosition + "px";
go.style.right = rightPosition + "px";
go.style.visibility = "visible";
++leftPosition;
if (leftPosition == 800){
--leftPosition;
正如我所说,它停在 800 px,但不会返回
让我们清理一下代码并实现您想要的内容。为了:
- 移至 800 像素
- 当 1 完成后,返回,速度加倍,大小加倍。
我们将使用一个作用域变量来完成此操作:speed
. speed
将是默认的速度和方向。
我还将你的代码分开setInterval
为了不阻止页面的执行。
function move() {
var elem = document.getElementById("box"),
speed = 1,
currentPos = 0;
// Reset the element
elem.style.left = 0+"px";
elem.style.right = "auto";
var motionInterval = setInterval(function() {
currentPos += speed;
if (currentPos >= 800 && speed > 0) {
currentPos = 800;
speed = -2 * speed;
elem.style.width = parseInt(elem.style.width)*2+"px";
elem.style.height = parseInt(elem.style.height)*2+"px";
}
if (currentPos <= 0 && speed < 0) {
clearInterval(motionInterval);
}
elem.style.left = currentPos+"px";
},20);
}
Fiddle: http://tinker.io/7d393 http://tinker.io/7d393。你会看到,它有效。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)