使用Javascript移动div的位置/上下，左右按钮

我刚刚进入jquery和javascript，但是，我的头撞在墙上试图弄清楚这一点。我试过使用。css和。animate命令，但我认为我做得不正确，或者我没能区分变量。

结尾会有DIV的for身体、眼睛、脸、牙齿等。每个都有自己的id。

每个"类别"中至少有20个

最终目标是有一种"生物创造者"，你有一系列的眼睛，牙齿等。每一个都是透明的png，如果有必要，在分层时使用z-index。

目前我使用以下内容来定位/替换div图像:

function showimagename(){document.getElementById('centraldiv').innerHTML="<a href='#'>
<img src='images/imagethumb2.png' border='0'></a>";}

那部分工作得很完美

代替以前的拖放方法(它的兼容性有限)，我尝试添加一组上下左右箭头当点击时，它会移动特定命名的div，比如5个像素。在用户对他们的选择感到满意之后，我计划使用画布来捕获图像(然后可能分享?发送吗?实现更多吗?)我已经删除了所有实际的图像，以保持简单。

这将在flash工作吗?当然!我只是对用flash编码不感兴趣，因为我想要尽可能多的兼容。

问题:

我有4个"箭头"，我可以指定向上，向下，向左或向右移动。但由于某种原因，我只能做上/下或左/右，而且当我为另一个div(比如生物的脚)添加第二组时，它只尊重脚本的最后一次迭代。

如果我的代码效率低下、草率，或者以其他方式侮辱了你的感官，我道歉，我是新来的:d

<!DOCTYPE html>
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.top = '0px';}function moveDown()
{imgObj.style.top = parseInt(imgObj.style.top)+5+'px';}
window.onload =init;
var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.top = '0px';}function moveUp()
{imgObj.style.top = parseInt(imgObj.style.top)-5+'px';}
window.onload =init;
</script>
<script type="text/javascript">
var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.left = '0px';}function moveRight()
{imgObj.style.left = parseInt(imgObj.style.left)+5+'px';}
window.onload =init;
var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.left = '0px';}function moveLeft()
{imgObj.style.left = parseInt(imgObj.style.left)-5+'px';}
window.onload =init;
</script>
</head>
<body>
<div id="centraldiv"><img height="50" width="50" src="//upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia- logo.png"></div><P>
<a href="#" onclick="moveLeft()">LEFT</A>
<a href="#" onclick="moveRight()">RIGHT</A>
<a href="#" onclick="moveDown()">DOWN</A>
<a href="#" onclick="moveUp()">UP</A>
</body></html>

请帮忙，我惹怒了我的编程伙伴!

您可以很简单地使用JQuery(您似乎正在使用它)实现预期的效果。

不确定你打算如何布局，但是像这样的东西应该可以工作:

moveImageLeft = function () {
   $('img').animate({'left', '-5px'});
}
$("#moveLeft").click(moveImageLeft);

这个示例将把所有图像移到左边，所以您需要仔细命名您的图像。话虽如此，您最初想到的拖放方法在许多浏览器中都能很好地工作。查看JQuery UI的可拖动小部件。如果你需要帮助，我们随时在这里。

相关内容

最新更新

热门标签：