ダイナミックイメージのセットに基づいてdivの幅を設定する方法は？

私は横に積み重なった15枚の画像を持っています。これらは、ビューポートサイズに基づいてサイズが完全に動的です。ダイナミックイメージのセットに基づいてdivの幅を設定する方法は？

ページを100％超えて拡張するには、15枚の画像の幅+固定量で定期的に幅を更新する必要があるDIVを使用しています。

私はかなり新しいjavascriptですが、私は見回して、簡単なスクリプトをまとめてテストしてテストページを作成できました。これは、スクリプトの末尾に「PX」とし、+なしの両方の仕事に失敗した

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<script type="text/javascript"> 
window.onresize = function(event) { 
var img = document.getElementById('1'); 
var w1 = parseInt(img.clientWidth); 
var img = document.getElementById('2'); 
var w2 = parseInt(img.clientWidth); 

d.style.width= w1 + w2 + 400; 
} 
</script> 
<style type="text/css"> 
    html,body{ 
    margin:0; 
    padding:0; 
    border:none; 
    overflow-y:hidden; 
} 
.gal{ 
    vertical-align:middle;  
} 
</style> 
</head> 

<body style="color: #1b1b1d"> 
<div style="position:absolute; width:18500px; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1;background-color:#1b1b1d"> 
<img id="1" class="gal" height="100%" src="image1.jpg" />&nbsp; 
<img id="2" class="gal" height="100%" style="max-height:652px;max-width:1024px" src="image1.jpg" />&nbsp; 
</div> 
</body> 

</html>

：

アップデートは、ここで私は仕事に取得することはできませんテストページの完全なコードです。。

何らかの理由で、全く機能しません。誰も私をここで案内するのを助けることができる？私はこれに新しいです。私はjQueryを別のコピーでインストールし、それが役立つならスクリプトを貼り付けました。

出典

2012-04-23 Chris M

"W1 + W2 + 400" はMr.Disappointment @ "W1 + W2 + 400" ではなく、W1 + W2 + 400 –

に等しい以来とき、あなたのニックネームは – TMS

:-)あなたのコメントによく合います[ids]（http://www.w3.org/TR/html401/types.html#type-name）に '＃ '文字が含まれていますか？正しいHTMLを書いてください。 – Raynos

これを試してみてください：

var img = document.getElementById('#1'); 
var w1 = img.clientWidth; 
var img = document.getElementById('#2'); 
var w2 = img.clientWidth; 

d.style.width = (w1 + w2 + 400) + "px";

出典

2012-04-23 10:55:36

このお試しください：私はあなたのスクリプトの最後の行だと思い

var img = document.getElementById('1'); 
var w1 = parseInt(img.clientWidth); 
var img = document.getElementById('2'); 
var w2 = parseInt(img.clientWidth); 

d.style.width= (w1 + w2 + 400) + "px";

出典

2012-04-23 10:55:52 gabitzish

を：

d.style.width="w1 + w2 + 400";

は引用符で囲まないためにニーズすなわち：

d.style.width= w1 + w2 + 400;

動的に幅を更新することに関しては、このスクリプトを処理するためにブラウザのサイズ変更イベントにこのスクリプトを添付する必要があります。すなわち：

window.onresize = function(event) { 
    //your code here 
}

出典

2012-04-23 11:02:06 aaronrhodes

ダイナミックイメージのセットに基づいてdivの幅を設定する方法は？

答えて

関連する問題