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 ピクセル移動する上下左右の矢印のセットを追加しようとしています。ユーザーが選択に満足したら、キャンバスを使用して画像をキャプチャすることを計画していました (そして、おそらく共有?送信?さらに実装?)シンプルにするために実際の画像を削除しました。

これはフラッシュで機能しますか？もちろん！できるだけ多くの互換性を求めているので、フラッシュでのコーディングには興味がありません。

問題：

上、下、左、または右にシフトするように指定できる 4 つの「矢印」があります。しかし、何らかの理由で、上下または左右のいずれかしか実行できません。さらに、別の div (生き物の足など) に 2 番目のセットを追加すると、スクリプトの最後の反復のみが考慮されます。

私のコードが非効率的、ずさん、またはあなたの感覚を侮辱している場合は、申し訳ありません.im new :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を確認してください。実装についてサポートが必要な場合は、いつでもお問い合わせください。

デシベル

于 2013-05-25T01:25:04.823 に答える