Question

我得到了这个代码，我无法弄清楚如何不超过父母div边界。

对象是可拖动的，我用滑块调整大小但是我不知道该怎么做，谢谢。

 $(document).on("input change",'.image-slider', function() {

    $('#timelineBGload-perfil').draggable();

    var slider = parseInt($(this).val());

    var height1 = $('#timelineBGload-perfil').height();
    var width1 = $('#timelineBGload-perfil').width();

    var percent1 = width1 / 600 *  100;

        var jeje = slider - 191;
        var jeje2 = slider - 191;

         $('#timelineBGload-perfil').css({'width': slider,'height':'auto'});

         $('#timelineBGload-perfil').css({'left': '-'+ jeje +'px','top': '-'+ jeje2 +'px'});

    });

https://jsfiddle.net/fypqgym1/

Answer 1

在移动图像之前，您必须考虑图像的位置。我将这个关键部分添加到您的逻辑中：

var previousLeft = $('#timelineBGload-perfil').css('left');
var previousTop = $('#timelineBGload-perfil').css('top');

这是一个有一些优化的工作示例： https://jsfiddle.net/fypqgym1/11/

您需要使用图像和尺寸来制作它。您还可以添加一个初始化步骤，以便在启动时按照您想要的方式对齐。

如何让这个形象不要离开父母div

1 个答案: