0

水平に積み重ねられた15枚の画像のセットがあります。ビューポートのサイズに基づいて、サイズが完全に動的になります。

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

私は JavaScript にかなり慣れていませんが、周りを見回して、簡単なスクリプトをつなぎ合わせてテスト ページを作成することができました。

更新、これは私が仕事をすることができないテストページの完全なコードです:

<!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>

スクリプトの最後に + "px" があってもなくても機能しません。

なんらかの理由で、まったく機能していません。ここで私を案内してくれる人はいますか？私はこれが初めてです。それが役立つ場合は、別のコピーと貼り付けられたスクリプトでjqueryをインストールしました。

4

3 に答える 3

0

これを試して：

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-23T10:55:36.393 に答える
0

これを試して：

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-23T10:55:52.763 に答える
0

あなたのスクリプトの最後の行だと思います：

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

引用符で囲む必要はありません。

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

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

window.onresize = function(event) {
    //your code here
}
于 2012-04-23T11:02:06.307 に答える