矢印をドラッグ＆ドロップして画像の高さを選択するためのインタラクティブな楽しい方法

こんにちは、基本的に矢印を作って、矢印の先端をドラッグして置くことができます別の高さ、私はどのようにJavaスクリプトのアナログ時計が動作するのか勉強しようとしました。どこから始めるべきかわからない。私は達成しようとしていることをよりよく説明する画像をアップロードできます。矢印をドラッグ＆ドロップして画像の高さを選択するためのインタラクティブな楽しい方法

基本的に私は人々が超高層ビルの高さを選ぶことができるポップアップウィンドウを持っています。そして、それらは基本的に90度の角度から始まる矢印の先端をドラッグすることができます。超高層ビルが大きくなる。何か意味があるのですか？

これはAjax、Javascript、または単純なCSS3とHTML5にすることができます。どんな助けでも大歓迎です。また、私は他のプロジェクトで私を助ける人を募集しています。あなたのメールアドレスを残してお手伝いができるなら、私は喜んであなたを連れて行くでしょう。

矢印を上下に動かさないでください。矢印の下端は、ドラッグしながら先端が動いている間は置かれたままにする必要があります。

もうひとつ、私は本当に人が私に答えの部分を与えるとき、私は誰かが私に答えの一部を与えるような気がする、私はいつも一緒にそれを摘出し、それを完了することが大好きです。だからあなたはこれをどうやって行うのか正確に知っていれば、もしあなたが私を最善にすることができれば、そうでなければ誰も私のために何かを学ぶことは決してありません。

はあなたに

PSありがとう：高さの各レベルのために私は別々の画像を持っています。

出典

2012-04-09 Aaron Russell

矢頭が1つの画像で、軸が矢頭の位置に基づいて高さと位置が調整されるdivの場合はどうなりますか？その後、マウスを上げると、実際の最終画像にAjaxを表示できますか？

これは最善のアプローチだとは必ずしも言えませんが、ここでは最初の部分の一般的なデモです。最後の高さを取得し、それをAjaxコールで渡す必要があります（もしあなたが全ての画像を持っているならば、実際にはajaxは必要ないかもしれませんが、画像のsrc属性を置き換えることができます）。実際には、矢印をSkyscaperのいくつかの共通要素（アンテナ？）に置き換え、ドラッグしてsrcを変更すると（建物自体を伸ばすので）...しかし、それはいくらかのちらつきをもたらすかもしれません。 ..

編集：HERESにコンボオプション：http://www.robotwoods.com/dev/so_arrow

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style> 
#tip {position:absolute; width:30px; height:30px; background:#00C; display:block; top:300px; z-index:20;} 
#bar {position:absolute; width:30px; height:0px; background:#00C; display:block; top:330px; z-index:10; } 
</style> 
</head> 

<body> 
<div id="tip"></div> 
<div id="bar"></div> 
</body> 
<script type="text/javascript"> 
var a = document.getElementById('tip'); 
var b = document.getElementById('bar'); 
var startY; 
a.addEventListener('mousedown',down,false); 

function down(e){ 
    a.addEventListener('mousemove',move,false); 
    a.addEventListener('mouseup',up,false); 
    a.addEventListener('mouseout',up,false); 
    startY=e.layerY; 
} 

function move(e){ 
    delta=startY-e.layerY; 
    a.style.top=(a.offsetTop-delta)+'px'; 
    b.style.top=(b.offsetTop-delta)+'px'; 
    b.style.height=(b.offsetHeight+delta)+'px'; 
} 

function up(){ 
    a.removeEventListener('mousedown',down,false); 
    a.removeEventListener('mousemove',move,false); 
} 
</script> 
</html>

出典

2012-04-09 16:07:49

矢印をドラッグ＆ドロップして画像の高さを選択するためのインタラクティブな楽しい方法

答えて

関連する問題