1

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

最后会有身体、眼睛、脸、牙齿等的DIV。每个都有自己的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 中编码不感兴趣，因为我要尽可能多地兼容。

问题：

我有 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>

请帮忙，我激怒了我的编码伙伴！

4

1 回答 1

0

您可以使用 JQuery 非常简单地实现预期效果（您似乎正在进入）。

不确定您打算如何将其全部展开，但这样的事情应该可以工作：

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

此示例会将所有图像向左移动，因此您需要仔细命名图像。话虽如此，您最初想到的拖放方法在许多浏览器中都可以正常工作。查看JQuery UI 的 Draggable Widget。如果您在实施方面需要帮助，我们总是在这里。

D b

于 2013-05-25T01:25:04.823 回答