Question

我有一组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安装了另一个复制和粘贴的脚本，如果这有帮助。

Answer 1

试试这个：

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";

Answer 2

试试这个：

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";

Answer 3

我认为你脚本的最后一行是：

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

需要不在引号中，即：

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

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

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

如何根据一组动态图像设置div宽度？

3 个答案: