0

我有一个对象，当您单击它并向右或向左拖动时，我想更改其宽度。移动鼠标（或手指）时增加或减少宽度。

<style>
    #changeMe {width:300px; height: 200px;}
</style>

<div id="changeMe">
    Some Content
</div>

<script>
    $('#changeMe').mousedown(function(){
        //Some Code?????
    });

</script>
4

4 回答 4

1

您要做的是跟踪鼠标的 x 坐标。如果比以前大，就加大尺寸，如果比以前小，就缩小尺寸。

未经测试，但以下应该是灵感。

var oldXPos = 0;
var isDragging = false;

$(document).mousemove(function(event) {
    if (isDragging)
    {
        var difference = event.pageX - oldXPos;
        // Do something with this value, will be an int related to how much it's moved
        // ie $('#changeMe').css.width += difference;
    }
    oldXPos = event.pageX;
});

$('#changeMe').mousedown(function() {
    isDragging = true;
})
$('#changeMe').mouseup(function() {
    isDragging = false;
})
于 2013-08-20T16:58:55.830 回答
0

如果我正确理解您的问题，您希望能够在对象沿 x 轴移动时动态增加/减小对象的大小，我建议您使用 $('#changeMe')。jQuery UI拖动事件中的offset() 。

您可以根据初始偏移量和新偏移量创建要使用的公式，以 $('#changeMe').css({ width: X, height: Y }); 调整容器大小，然后插入任何内容您的 X 和 Y 值以像素为单位。

编辑以进一步阐述代码：

var initX = 0;
var initW = 0;
$('#changeMe').draggable({
    start: function() {
        initX = $(this).offset().left;
        initW = $(this).width();
    },
    drag: function() {
        var deltaX = initX - $(this).offset().left;
        $(this).css({ width: initW + deltaX });
    }
});

如果您使用它作为您的基础，那么它对于您的应用程序来说是一个非常好的和简单的解决方案。

于 2013-08-20T16:53:03.800 回答
0

你只需要一个resizable({})效果。

$('#changeMe').resizable({});

你可以看看这篇文章

可调整大小

于 2013-08-20T16:45:35.810 回答
0 
 $(function() {
     $('.testSubject').resizable();
 });

或者

#changeMe {width:300px; height: 200px; border: 1px solid black;}

<body>
<div id="changeMe">
    Some Content
</div>
</body>

  $('#changeMe').resizable({});

或者

 $(function(){

            $('img[src*=small]').toggle(
                function() {
                  $(this).attr('src',
                    $(this).attr('src').replace(/small/,'medium'));
                },
                function() {
                  $(this).attr('src',
                    $(this).attr('src').replace(/medium/,'large'));
                },
                function() {
                  $(this).attr('src',
                    $(this).attr('src').replace(/large/,'small'));
                }
            );

          });
于 2013-08-20T16:47:13.570 回答