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

How can I change the size of an image when I drag the image up or down?

本文关键字：图像 何更改 拖动      更新时间：2023-09-26

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

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

这不是一个现成的例子，但它的想法会对您有所帮助。。

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进行一些计算，并尝试计算出你需要在图像中添加或删除多少像素。

相关文章：