Question

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

最后将有DIV用于身体，眼睛，脸，牙齿等每个人都有自己的身份。

每个'类别'中至少有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>

请帮助，我在激怒我的编码好友！

Answer 1

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

不确定你打算如何全力以赴，但这样的事情应该有效：

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

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

分贝

使用Javascript使用/ Up，Down，Left和Right按钮移动div的位置

1 个答案: