0

我目前正在构建一个基本的视频时间线。在这个时间线上是各种持续时间可变的媒体资产，代表资产的 DIV 的宽度反映了持续时间，1 秒被测量为 35 像素。因此，例如，一个 5 秒的资源将在时间轴上占用 175 像素的宽度。

因为时间线需要比我在页面上可用空间的宽度还要长，所以它需要水平滚动。我没有使用丑陋的标准滚动条，而是使用 jQuery 插件滚动条，它要求时间线的全宽 DIV 位于另一个 DIV 内，该 DIV 是页面可用区域的宽度并充当框架，与内部 DIV 绝对定位。当您向左或向右移动滚动条时，它会更改内部 DIV 的“左”值。

在给出了这个背景之后，我现在来解决我的问题。时间线上的资产需要水平调整大小以调整其持续时间。我使用 jQuery UI 进行了这项工作，但我需要这样做，以便当我将资产的右边缘拖动到构成时间线的外部 DIV 的右边缘附近时，时间线的内部 DIV 会向左移动（基本上是滚动）并且资产的宽度增加了 1 秒（35 像素）。

即使是最后一点，我也有一定程度的工作，但还不够好。我需要的是，当我向右拖动足够远，使我在取景 DIV 右边缘的 35-70 像素内时，内部 DIV 时间线将向左移动，资产的宽度将增加，这将一直发生，直到我将鼠标移回左侧。

我能想到的最好的例子是，当您在浏览器中选择文本并拖动到屏幕底部时，屏幕开始向下滚动，并且一直滚动到您向上移动鼠标为止。

目前我正在尝试通过绘制 jQuery UI 可调整大小元素的“resize”事件来实现这一点，但问题是我无法获得我刚才所说的那种连续效果，我必须继续进一步拖动鼠标向右，而不是仅仅保持静止。当我到达窗口的右边缘时，我必须释放鼠标按钮，移回调整大小手柄并再次开始拖动。

这是我试图编写的函数（仅供参考，.mediaInstance 是时间轴上的资产）：

//Scroll Timeline when resized handle comes close to right edge
        function timelineScroll() {

            //console.log('running');
            var mediaElement = $('#mediaTrack .mediaInstance.resizing');
            var track = $('#horiz_container_inner');

            //Determine location of right edge of the timeline viewport
            var timeline = $('#horiz_container_outer');
            var timelineOffset = timeline.offset();
            var timelineLeft = timelineOffset.left;

            var timelineRight = timelineLeft + $('#horiz_container_outer').width();

            //Find right edge of current .mediaInstance
            var instanceOffset = mediaElement.offset();
            var instanceLeft = instanceOffset.left;

            var instanceRight = instanceLeft + mediaElement.width();

            if ( (timelineRight-instanceRight) < 35 ) {

                var timelineCurrentLeft = Number(track.css('left').replace('px',''));
                var timelineNewLeft = timelineCurrentLeft - 70;
                track.css('left',timelineNewLeft);

                mediaCurrentWidth = mediaElement.width();
                mediaElement.width(mediaCurrentWidth+35);


                if (currentMousePos.x > timelineRight) {

                    while (currentMousePos.x > timelineRight) {

                        var timelineCurrentLeft = Number(track.css('left').replace('px',''));
                        var timelineNewLeft = timelineCurrentLeft - 35;
                        track.css('left',timelineNewLeft);

                        mediaCurrentWidth = mediaElement.width();
                        mediaElement.width(mediaCurrentWidth+35);

                    }

                }

            }

        }

你会注意到我什至在最后尝试了一个循环，基于鼠标位置比框架 DIV 的右边缘更远，但我认为它不会起作用，而且它没有......只是看起来让我陷入无限循环。

无论如何，我非常感谢任何人可以提供的任何帮助。我正在做一个周转时间很短的项目，而且我以前从未真正做过任何这些特殊的事情。

4

1 回答 1

0

事实证明我解决了自己的问题。我只需要在“调整大小”函数中使用 setTimeout，每 250 毫秒检查鼠标是否超出框架 DIV 的右边缘，如果是，则将内部 DIV 向左移动并增加资产的宽度。这是我用的...

编辑：事实证明我的解决方案没有像我希望的那样工作，所以我毕竟可以使用一些帮助。

这是HTML：

<div id="horiz_container_outer">
    <div id="horiz_container_inner" style="position: absolute; left: 0px; top: 0px; visibility: visible;">
        <div id="horiz_container" style="width: 10500px;">


            <div id="transitionTrack"></div>

            <div id="mediaTrack" class="ui-sortable ui-droppable">

                <div class="transitionBoxContainer first ui-droppable"></div>

                <div class="mediaInstance" assetid="001" assettype="video" thumb="video1_thumb.jpg" style="display: block; width: 419px;" type="asset" duration="12">
                    <div class="mediaThumbnail" style="background-image: url(./images/assets/thumbnails/video1_thumb.jpg);"></div>
                    <div class="mediaInfo">
                        <div class="mediaFilename">video1.avi</div>
                        <div class="mediaDuration">12s</div>
                        <div class="mediaHandle"></div>
                    </div>
                    <div class="transitionBoxContainer ui-droppable"></div>
                    <div class="deleteButton"></div>
                </div>

            </div><!-- End of #mediaTrack -->

        </div><!-- End of #horiz_container -->
    </div><!-- End of #horiz_container_inner -->
</div><!-- End of #horiz_container_outer -->

这是我的代码，用于使时间轴上的 mediaInstance 可调整大小，捕捉到 35px 增量：

//Watch timeline assets for click on resize handle
$("#mediaTrack").on('mousedown','.mediaInstance .mediaHandle', function(e) {

    e.stopPropagation();
    e.preventDefault();


    //Find offset location of right edge of the timeline viewport
    var timelineViewport = $('#horiz_container_outer');
    var timelineViewportLeft = timelineViewport.offset().left;
    var timelineViewportRight = timelineViewportLeft + timelineViewport.width();

    //Assign track object to variable
    var track = $('#horiz_container_inner');

    var thisInstance = $(this).parents('.mediaInstance');

    //Store the mouse position before we start moving
    var startMousePos = e.pageX;


    $(document).mousemove(function(e){

        var currentInstanceWidth = thisInstance.width();

        //Find right edge offset of current .mediaInstance
        var instanceLeft = thisInstance.offset().left;
        var instanceRight = instanceLeft + currentInstanceWidth;


        if ( (e.pageX < (startMousePos-35)) || (e.pageX > (startMousePos+35)) ) {

            if ( e.pageX < (startMousePos-35) ) {

                thisInstance.width(currentInstanceWidth-35);

            } else { 

                                thisInstance.width(currentInstanceWidth+35);

            }

            startMousePos = e.pageX;
            recalcDuration(thisInstance);
            calcTotalDuration();

        }

    });

});
$(document).mouseup(function(e){
    $(document).unbind('mousemove');
});

这对于实际调整大小很有用，但我遇到的问题是，当我将鼠标移过 #horiz_container_outer 的右边缘时，它充当时间线的框架，我希望 #horiz_container_inner DIV 开始向左移动位置向左增加 35px，同时继续调整 .mediaInstance div 的大小以使其宽 35px ......我希望这两件事每 0.25 秒发生一次......但是，我不想要“滚动”的#horiz_container_inner 使用鼠标移动连续射击。一旦鼠标通过#horiz_container_outer 的右边缘，我想要一些函数接管并开始以设定的间隔滚动和调整.mediaInstance DIV 的大小，直到鼠标再次向左移动，越过#horiz_container_outer 的右边缘，

问题是我不知道如何实现这一点。我尝试使用标志变量和条件来告诉我鼠标何时“在区域中”，以 inTheZone = false 开头，运行条件​​以仅在 inTheZone == false 时运行我的初始代码，然后将其设置为 true 一次鼠标进入右侧区域并具有 setTimeout 接管以循环滚动和调整大小。这在一定程度上起作用，但是鼠标位置突然变得不可用，所以我不知道什么时候我移出了区域，而 div 只是无限期地滚动。

有任何想法吗？

于 2013-10-24T22:05:15.140 回答