0

我有一组 15 张水平堆叠的图像。根据视口大小，它们的大小是完全动态的。

要将页面扩展到 100% 以上，我使用了一个 DIV，它需要定期更新其宽度，并使用 15 个图像的宽度 + 固定数量。

我对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;

关于动态更新宽度 - 您确实需要将此脚本附加到浏览器的 resize 事件来处理它。IE：

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