當尺寸變化時jQuery保持比例

Question

我想動態改變iframe中提到的寬度和高度，所以在textarea中。爲此，我使用兩個輸入文本並嘗試實時恢復值。另外，當寬度或高度的值發生變化時，我想保持比例。

https://jsfiddle.net/nadir10/v7heodzm/

HTML

<form id="generation_lien" action="/"> 
    <textarea id="embed_code" readonly="readonly"></textarea> 
    <label>Size :</label> 
    <input id="width_iframe" type="text" value="640" /> 
    <span>×</span> 
    <input id="height_iframe" type="text" value="360" /> 
    <span>pixels</span> 
</form> 

jQuery的

function calculateFrameWidth(){return $('#width_iframe').val();} 
function calculateFrameHeight(){return $('#height_iframe').val();} 
$("#width_iframe").keyup(function() 
{ 
    widthIframe = calculateFrameWidth(); 
    /*heightIframe = widthIframe/1.77777778;*/ 
}); 
$("#height_iframe").keyup(function() 
{ 
    heightIframe = calculateFrameHeight(); 
    /*widthIframe = heightIframe * 1.77777778;*/ 
}); 
var widthIframe = calculateFrameWidth(); 
var heightIframe = calculateFrameHeight(); 
document.getElementById('embed_code').innerHTML = '<iframe id="iframe_link" src="mysite/iframe.php" width="'+widthIframe+'" height="'+heightIframe+'></iframe>'; 

Answer 1

您可以通過Width/Height計算出尺寸比例。

var firstWidth = $("#width_iframe").val(); 
 
var firstHeight = $("#height_iframe").val(); 
 
var ratio = firstWidth/firstHeight; 
 
setSize(firstWidth, firstHeight); 
 

 
$("#width_iframe").on("keyup change", function(){ 
 
    var width = $(this).val(); 
 
    $("#height_iframe").val(width/ratio); 
 
    setSize(width, $("#height_iframe").val()); 
 
}); 
 

 
$("#height_iframe").on("keyup change", function(){ 
 
    var height = $(this).val(); 
 
    $("#width_iframe").val(height * ratio); 
 
    setSize($("#width_iframe").val(), height); 
 
}); 
 

 
function setSize(widthIframe, heightIframe){ 
 
    $("#embed_code").text('<iframe id="iframe_link" src="mysite/iframe.php" width="'+widthIframe+'" height="'+heightIframe+'"></iframe>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="embed_code" readonly="readonly" style="width:100%"></textarea> 
 
<label>Size :</label> 
 
<input id="width_iframe" type="text" value="640" /> 
 
<span>×</span> 
 
<input id="height_iframe" type="text" value="360" /> 
 
<span>pixels</span>

Answer 2

到任何值，你想，你可以通過改變iFrame的寬度/高度做到這一點，像這樣：

$("#embed_code").css({ 
    width: widthIframe, 
    height: heightIframe 
}); 

Answer 3

就keyup事件而言，您可以使用下面的代碼。

$("#width_iframe").on('keyup',function() 
{ 
    alert("Width"); 
    widthIframe = calculateFrameWidth(); 
    /*heightIframe = widthIframe/1.77777778;*/ 
}); 

$("#height_iframe").on('keyup',function() 
{ 
alert("Height"); 
    heightIframe = calculateFrameHeight(); 
    /*widthIframe = heightIframe * 1.77777778;*/ 
}); 

Answer 4

我試圖從最小的代碼更改。如果您想要更新保存日糧的值，則需要保存以前的值。我通過在textarea上創建data-prev-width/height屬性來在updateTextAreaContent上做到這一點。我認爲你的代碼幾乎是正確的，除非每次發生密鑰安裝都沒有調用updateTextAreaContent。歡呼:)

function calculateFrameWidth() { 
 
    return parseFloat($('#width_iframe').val()); 
 
} 
 

 
function calculateFrameHeight() { 
 
    return parseFloat($('#height_iframe').val()); 
 
} 
 

 
function updateWidthAndHeight(width, height) { 
 
    $('#width_iframe').val(width); 
 
    $('#height_iframe').val(height); 
 
} 
 

 
function getPrevWidthAndHeight() { 
 
    return { 
 
    width: parseFloat($('#embed_code').attr("data-prev-width")), 
 
    height: parseFloat($('#embed_code').attr("data-prev-height")) 
 
    } 
 
} 
 

 
$("#width_iframe").keyup(function(e) { 
 
    console.log(e); 
 

 
    widthIframe = calculateFrameWidth(); 
 
    heightIframe = calculateFrameHeight(); 
 
    var prevWidthAndHeight = getPrevWidthAndHeight(); 
 
    var newHeight = widthIframe/prevWidthAndHeight.width * heightIframe; 
 
    console.log(prevWidthAndHeight); 
 
    updateWidthAndHeight(widthIframe, newHeight); 
 
    updateTextAreaContent(); 
 
    /*heightIframe = widthIframe/1.77777778;*/ 
 
}); 
 

 
$("#height_iframe").keyup(function(e) { 
 

 
    widthIframe = calculateFrameWidth(); 
 
    heightIframe = calculateFrameHeight(); 
 
    var prevWidthAndHeight = getPrevWidthAndHeight(); 
 
    var newWidth = heightIframe/prevWidthAndHeight.height * widthIframe; 
 
    console.log(prevWidthAndHeight); 
 
    updateWidthAndHeight(newWidth, heightIframe); 
 
    updateTextAreaContent(); 
 
    /*widthIframe = heightIframe * 1.77777778;*/ 
 
}); 
 

 
function updateTextAreaContent() { 
 
    var widthIframe = calculateFrameWidth(); 
 
    var heightIframe = calculateFrameHeight(); 
 
    $('#embed_code').attr("data-prev-width", widthIframe); 
 
    $('#embed_code').attr("data-prev-height", heightIframe); 
 
    document.getElementById('embed_code').innerHTML = '<iframe id="iframe_link" src="mysite/iframe.php" width="' + widthIframe + '" height="' + heightIframe + '"></iframe>'; 
 
} 
 

 
//init textarea 
 
updateTextAreaContent();

#embed_code { 
 
    width: 550px; 
 
    height: 50px; 
 
    margin-top: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="generation_lien" action="/"> 
 
    <textarea id="embed_code" readonly="readonly"></textarea> 
 
    <label>Size :</label> 
 
    <input id="width_iframe" type="text" value="640" /> 
 
    <span>×</span> 
 
    <input id="height_iframe" type="text" value="360" /> 
 
    <span>pixels</span> 
 
</form>