1

大家好，我是编程初学者。我想在网页上上下拖动图像时更改图像的大小？
向上拖动时尺寸应该减小，向下拖动时尺寸会增大。我现在可以通过动画改变它的大小，我希望它在我拖动它时发生。这是代码

 <!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，您可能需要对height图像的图像、图像的图像进行一些position计算，并尝试计算出需要从图像中添加或删除多少像素。

于 2013-07-20T09:46:47.863 回答