Question

所以现在我试图实施横向移动：

<!DOCTYPE html>
<html>
<head>
<title>Animation Bullshit</title>
<link rel="stylesheet" href="animation.css"/>
</head>
<body>
<div id="div">
</div>

<script type="text/javascript">
div = document.getElementById("div")

div.onmouseover = move, left; 
div.onmouseout = up;

var cHeight = div.style.height | 150;
var cLeft = div.style.marginLeft | 0;

function move() {
    if (cHeight < 300) {
        cHeight += 10;
        div.style.height = cHeight + "px";
        setTimeout (move, 20);
    }
}

function slide() {
    if (cLeft < 400) {
        cLeft += 10;
        div.style.marginLeft = cLeft + "px";
        setTimeout (slide, 20);
    }
}

function up() {
    if (cHeight > 150) {
        cHeight -= 10;
        div.style.height = cHeight + "px";
        setTimeout (up, 20);
    }
}
</script>
</body>
</html>

所有东西都加载了，但当我鼠标悬停在div上时，没有任何反应。它甚至没有向下扩展。建议？

它告诉我要添加更多细节...呃...... div是黑色的，初始边距为0px。

Answer 1

我刚刚使用了你的代码。这是你想要的？

http://jsfiddle.net/tz2vcote/ 我认为是因为你没有用var声明变量div。你应该检查一下firebug console。

结帐更新后的 http://jsfiddle.net/tz2vcote/2/ 点击幻灯片效果的div。

更基本的Javascript动画问题

1 个答案: