这个标题听起来令人困惑吗?我认为无论如何它可能会很好。
当我点击页面时,我希望他们能够给我更短和更长的一行。
你可以明白我的意思:
http://jsfiddle.net/shawn31313/HKLhE/9/show/
做一个鼠标按下,他们将你的 Action 向右移动。它工作正常。 但是现在,将鼠标向左移动。看到问题了吗?它的方向与您向右拖动时的方向相同。我知道这是因为我使用的是宽度,显然宽度是单向的。
到目前为止,这是我的代码:
$(document).ready(function() {
var dragStatus = 0,
getPos, giveRandomID;
$(document).mousedown(function(event) {
dragStatus = 0;
getPos = {
top: event.clientY,
left: event.clientX
};
giveRandomID = Math.floor(Math.random() * 99999);
});
$(document).mousemove(function() {
var line = $('#line' + giveRandomID);
if (dragStatus == 0) {
$('body').append("<div id='line" + giveRandomID + "' class='line' style='position:absolute;top:" + getPos.top + "px;left:" + getPos.left + "px;background:black;width:2px;height:5px'></div>");
dragStatus = 1;
}
if (dragStatus == 1) {
if (event.clientX > line.offset().left) {
line.css({
width: event.clientX - line.offset().left
});
} else {
line.css({
width: line.offset().left - event.clientX
});
}
//for DEG "-" Top-Math.abs(DEG*2) for Deg "+" Top+(DEG*2)
}
});
$(document).mouseup(function() {
dragStatus = 2;
});
});
我希望有人能帮我解决这个问题。也许是一种完全不同的设置方式。只是解决这个问题的东西
最佳答案
要使线条向左拉伸(stretch),您必须更新 left
属性:
if (event.clientX > getPos.left) {
line.css({
left: getPos.left,
width: event.clientX - getPos.left
});
} else {
line.css({
left: event.clientX,
width: getPos.left - event.clientX
});
}
jsFiddle:http://jsfiddle.net/HKLhE/16/
关于javascript - 如何双向扩展元素宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11129973/