Hi every one i am a beginner in programming. I want to change the size of an image when I drag the image up and down on my web page?
The size should decrease when i drag it up an increase when i drag it down. I am able to change its size by animation now i want it to happen when i drag it. Here's the code
大家好,我是编程的初学者。我想在网页上上下拖动图像时更改图像的大小?当我将其向下拖动时,将其向上拖动时,尺寸应该会减小。我现在可以通过动画改变它的大小我希望它在我拖动时发生。这是代码
<!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 个解决方案
#1
3
This is not a ready to use example but it is the idea that will help you..
这不是一个准备好使用的例子,但它的想法将帮助你..
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
To get this working on your site or something instead of using event.pageY you will probably have to do some calcualtions with the height of the image, the position of the image and try and work out how many pixels you need to add or remove from the image.
要在您的网站上运行此功能而不是使用event.pageY,您可能需要对图像的高度,图像的位置进行一些计算,并尝试计算出需要添加或删除的像素数量。图片。
#1
3
This is not a ready to use example but it is the idea that will help you..
这不是一个准备好使用的例子,但它的想法将帮助你..
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
To get this working on your site or something instead of using event.pageY you will probably have to do some calcualtions with the height of the image, the position of the image and try and work out how many pixels you need to add or remove from the image.
要在您的网站上运行此功能而不是使用event.pageY,您可能需要对图像的高度,图像的位置进行一些计算,并尝试计算出需要添加或删除的像素数量。图片。