您的位置:首页 > Web前端 > JavaScript

通过js实现简单的动画效果

2016-10-28 20:40 756 查看
又是一个非常无脑的东西不过一个简单的平移我居然写了快两小时被自己蠢哭了= =。

虽然只是一个非常简单的动画效果不过通过这两个小时踩了许多坑之后也算是对js的一些机制有更明确的认识。——–特别是关于获取样式的问题:

在没有通过dom为样式赋值之前无法通过dom获取样式属性即使该样式属性已经在样式表中被定义过!!

嗯这个问题坑了我好久好久= =只要没有通过dom为指定样式赋值,那么 element.style.attribute返回的字符串永远是个空字符串即 “”,只有 执行 element.style.attribute=”*“语句之后才可以正确的通过dom获取样式的值。还有发现的其他一些js的细节就不再赘述了。

js 代码如下

function moving() {
var top = parseInt(div.style.top);
var left = parseInt(div.style.left);
top+=1;
left+=1;
div.style.top=top+"px";
div.style.left=left+"px";
if (top>=500) return true;
movement = setTimeout("moving()",5);
}
window.onload=function() {
move();
}
function move() {
div = document.getElementById("test");
div.style.top="100px";
div.style.left="100px";
movement = setTimeout("moving();",500);
}


还有个坑就是settimeout的传参问题把网络上的传参办法都试了。查了一晚上最后发现变量名打错了!!!!!!!!!!没有语法检查真的是血崩。。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript