javascript - 使用javascript来回移动div/动画
问题描述
嗨,我正在尝试让 div 元素自动来回移动,但我被卡住了,我不确定我需要添加什么才能让它工作。我什至不能让它动起来
我的命名空间:
var $hubbe = {};
我的移动功能:
$hubbe.movex = 0;
$hubbe.newdiv = document.getElementById("newdiv");
$hubbe.move = function() {
$hubbe.movex++
$hubbe.newdiv.style.left = $hubbe.movex + 'px';
setTimeout($hubbe.move, 2000);
}
和 div :
$hubbe.printelement = function() {
$hubbe.div = document.createElement("DIV");
$hubbe.div.setAttribute("id", "newdiv");
$hubbe.div.setAttribute("onload", "$hubbe.move()")
$hubbe.div.innerHTML = "hej";
$hubbe.div.style.position = "absolute";
$hubbe.div.style.left = "50%";
$hubbe.div.style.top = "50%";
document.body.appendChild($hubbe.div);
}
编辑:我的 jsfiddle:https ://jsfiddle.net/g7ytvevp/
解决方案
请查看以下内容: https ://jsfiddle.net/g7ytvevp/1/
<script>
var $hubbe = {};
$hubbe.printelement = function() {
//skapar en varibale $hubbe.div som ett div element
$hubbe.div = document.createElement("DIV");
// sätter ett id newdiv på $hubbe.div
$hubbe.div.setAttribute("id", "newdiv");
$hubbe.div.setAttribute("style", "background-color:red;")
$hubbe.div.innerHTML = "hej";
$hubbe.div.style.position = "absolute";
$hubbe.div.style.left = "50%";
$hubbe.div.style.top = "50%";
//skriver ut $hubbe.div till body
document.body.appendChild($hubbe.div);
$hubbe.move();
}
$hubbe.movex = 0;
$hubbe.newdiv = document.getElementById("newdiv");
$hubbe.move = function() {
$hubbe.movex++
$hubbe.div.style.left = $hubbe.movex + 'px';
setTimeout($hubbe.move, 2000);
}
</script>`
您没有调用“移动”函数,因为没有为该 div 触发“onload”事件。这篇文章中提到了这样做的原因: 如何将 onload 事件添加到 div 元素?
更新:
带有描述性评论的动画最终版本。 https://jsfiddle.net/g7ytvevp/9/
var $hubbe = {};
$hubbe.printelement = function() {
$hubbe.div = document.createElement("DIV");
$hubbe.div.setAttribute("id", "newdiv");
$hubbe.div.setAttribute("style", "background-color:red;")
$hubbe.div.innerHTML = "hej";
$hubbe.div.style.position = "absolute";
$hubbe.div.style.left = "50%";
$hubbe.div.style.top = "50%";
document.body.appendChild($hubbe.div);
$hubbe.move();
}
$hubbe.movex = 0;
$hubbe.newdiv = document.getElementById("newdiv");
$hubbe.translateX = 1;
$hubbe.translateY = 0;
$hubbe.move = function() {
var element = $hubbe.div;
var translateX = $hubbe.translateX;
var translateY = $hubbe.translateY;
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
// This method basically gives us the position of all four sides of the "element" on which it is call. It gives us the size as well.
// In the current case we only require the 'current position'
// of our div so we call it over our div and the resultant
// variable 'pos' would contain the respective position of
// each side left / right / top / bottom in it e.g pos.left etc.
// This is needed because we need to keep track of where our div
// currently is, since the translation is based on certain
// conditions e.g if the div reaches the right edge off the
// screen, it should start moving left etc.
var pos = element.getBoundingClientRect();
// We're using the same method to find the dimesions of our
// parent container i.e "body" element, since we need to keep
// track of the condition when our div reaches the edge of the
// screen and that we can only know if we know the co-ordinates
// of the edge.
var domRect = document.body.getBoundingClientRect();
if(pos.right >= domRect.right)
$hubbe.translateX = -1;
if(pos.left <= domRect.left)
$hubbe.translateX = 1;
// This is the line that basically makes the translation along
// X - axis happen. pos.left variable contains the position
// (in pixels) of the left edge of the div object. We add the
// translation factor "translateX" (1 in this case) to it and
// update the position of the div, causing it to move to the left
// or the right. In case of a positive (+1, +2 ... ) it will move
// to the right, for negative, it will go left and for 0, it will
// not move along X - axis. The higher the translation factor,
// the faster the object would translate.
$hubbe.div.style.left = pos.left + translateX + 'px';
// This can be used for vertical translation / movement along the
// Y - axis. It was just for demonstration purposes. For now
// it isn't event being used.
$hubbe.div.style.top = pos.top + translateY + 'px';
setTimeout($hubbe.move, 10);
}
</script>
推荐阅读
- python - 在另一个视图中使用一个视图中的值 Django
- caffe - 使用 caffe 训练 RCF 模型的问题
- react-native - 将多个导航器嵌套在堆栈中还是切换导航器更好?
- r - 比较两个数据框并有条件地提取另一列的值
- tcl - 设置命令的使用
- django - 在 Django 中编辑动态选择字段
- javascript - Rails 6 - 在某些控制器操作中需要 JS 文件
- android - 你能帮我创建这个浮动操作按钮吗?
- python - 我正在尝试通过电子邮件将图像作为附件发送而不保存图像。我想直接发送变量
- python-3.x - .encode("utf-8") 似乎不支持我的表情符号?