1

こんにちは、私はプログラミングの初心者です。Web ページで画像を上下にドラッグするときに、画像のサイズを変更したいですか?
上にドラッグするとサイズが小さくなり、下にドラッグするとサイズが大きくなります。アニメーションでサイズを変更できるようになりました。ドラッグするとサイズが変更されます。これがコードです

 <!DOCTYPE html>
<html>
<head>
<style> 
div.hidden
{
width:20px;
height:80px;
background:white;
position:relative;
overflow:hidden;
left:50px;
top:400px;
-webkit-animation-timing-function:linear;
-webkit-animation:myfirst 5s ; 
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from  {background:white; height:0px;width:0;left:50px; top:40px; }

to {background:white; height:80px;width:20px;left:50px; top:430px;}

}
</style>
</head>
<body background="road.jpg">
<div style="position:relative;width:126px;height:350px; overflow:hidden; border: solid             1px;left:639px;top:307px;">
<div class="hidden";></div>
</div>

To: <input type="text" name ="To"><br><br>


</body>
</html>
4

1 に答える 1

3

これはすぐに使用できる例ではありませんが、役立つアイデアです..

var dragging = false;
$('img').mousedown(function(){
   dragging = true; // Detect if we are dragging the image
});

$(document).mousemove(function(){
    if(dragging === true) {
       $('img').height(event.pageY + 'px'); // Detect how many pixels high from the top of the screen
    }
});

$(document).mouseup(function(){
   dragging = false; // detect when we are done
});

デモ

を使用する代わりに、これをサイトまたは何かで機能させるには、おそらく画像の 、画像のを使用event.pageYしていくつかの計算を行い、画像に追加または削除する必要があるピクセル数を試して計算する必要があります。heightposition

于 2013-07-20T09:46:47.863 に答える