如何在向上或向下拖动图像时更改图像的大小？
如何在向上或向下拖动图像时更改图像的大小？
提问于 2013-07-20 09:39:13
大家好，我是编程的初学者。当我在网页上上下拖动图像时，我想更改图像的大小吗？
当我向上拖动它时，大小应该会减小，当我向下拖动它时，大小应该会增加。我现在可以通过动画改变它的大小，我希望它发生在我拖动它的时候。下面是代码
<!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>回答 1
Stack Overflow用户
发布于 2013-07-20 09:46:48
这不是一个现成的示例，但它的想法将对您有所帮助。
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进行一些计算，并尝试计算出你需要在图像中添加或删除多少像素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17760835
复制
相似问题
向上或向下拖动片段上的关闭图像效果
向下或向上拖动时刷新列表视图，如gmail或facebook
当我向下或向上滚动页面时，如何使图像向下或向上滚动？
检测向上拖动或向下拖动
jquery :向上和向下拖动图像:按像素限制
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
