0

我使用了 jQuery resize 方法，包括alsoResize，当我调整 div 框架的大小时它不能正常工作。

这就是我所拥有的，

$("#resizable").resizable({   
    minHeight: 690,
    minWidth: 930,
    alsoResize: "#video, #subtitle, #controls, #scroll"       
});

当我使用此代码调整大小时，视频、字幕和其他 div 不在位置和大小上。

现在我查看 API 调整大小函数，发现它可以工作，

$( "#resizable" ).resizable({
    resize: function( event, ui ) {
        //resize video, subtitle text, scroll box, and #control button//
    }
});

当我将 div 框架的大小调整为更大或更小时，如何在此函数中计算以正确调整它们的大小？

CSS 字幕示例之一，

#subtitle {
    position:absolute;
    width:840px;
    bottom:40px;
    left:50;
    z-index:2000;
    color:white;
    font-weight:bold;
    font-size:150%;
    text-align:center;
}

和 html 示例，

<div id="resizable" class="ui-widget-content">
        <div id ="draggable" style="background-color:gray;">
            <select id="options">
                <optgroup label="Caption">
                    <option value="off1">Off</option>
                    <option value="1 line">1 line</option>
                    <option selected value="2 line">2 Lines</option>
                    <option value="3 line">3 lines</option>
                </optgroup>
                <optgroup label="Transcript">
                    <option value="off2">Off</option>
                    <option value="4 line">4 Lines</option>
                </optgroup>
            </select>
            <button id="returnPosition" type="button">CC return to Original</button>
        </div>
        <div id="container" class="container">

                <video id="video" width="930" height="500" controls>
                    <source src="caption.mp4" type="video/mp4">
                    <source src="caption.ogg" type="video/ogg" >
                    <source src="caption.webm" type="video/webm" >
                </video> 
                <div id="subtitle" class="subtitle">
                </div>
        </div>
        <div id="controls">
            <button id="rewind5" type="button">5 sec rewind</button>
            <button id="negative3" type="button">-3.0x</button>
            <button id="negative2" type="button">-2.0x</button>
            <button id="negative" type="button">-1.5x</button>
            <button id="normal" type="button">&#x25BA</button>
            <button id="speed" type="button">1.5x</button>
            <button id="speed2" type="button">2.0x</button>
            <button id="speed3" type="button">3.0x</button>
            <button id="forward5" type="button">5 sec fast forward</button>
        </div>
        <div id="scroll" class ="scroll">

        </div>
    </div>
4

0 回答 0