Demo

Question

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

 <!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>

Answer 1

这不是一个随时可用的例子，但这个想法可以帮助你......

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
});

Demo

要在您的网站上运行此功能而不使用event.pageY，您可能需要使用图片的height，图片的position进行一些计算并尝试并计算出需要在图像中添加或删除的像素数。

当我向上或向下拖动图像时，如何更改图像的大小？

1 个答案:

Demo