javascript动态创建图层，为什么使用循环遍历之后div层中只显示最后一个图片？求教~

MnZlZ 2014-10-04 03:27:44

<html>
<head>
<title></title>
<style type="text/css">
.divStyle
{
position:absolute;
top:window.event.clientY;
left:window.event.clientX;
height:150px;
width:600px;
border-style:solid;
border-width:thin;
border-color:Blue;
}
</style>
<script type="text/javascript">
function backGround() {
var Date = { "images/001small.jpg": "['images/001medium.jpg','images/001.jpg']", "images/002small.gif": "['images/002medium.jpg','images/002.gif']", "images/003small.jpg": "['images/003medium.jpg','images/003.jpg']" };
var divImg = document.createElement("div");
// var img = document.createElement("img");
divImg.className = "divStyle";
for (var key in Date) {
divImg.innerHTML = "<img src="+key+" />";//问题就出现在这里了
}
document.body.appendChild(divImg);
}
</script>
</head>
<body>
<a href="javascript:backGround()">背景</a>
</body>
</html>

...全文

322 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

save4me 2014-10-05

打赏
举报


.divStyle 
{
    position:absolute;
    height:150px;
    width:600px;
    border-style:solid;
    border-width:thin;
    border-color:Blue;
}


function backGround() {
    var Date = { "images/001small.jpg": "['images/001medium.jpg','images/001.jpg']", "images/002small.gif": "['images/002medium.jpg','images/002.gif']", "images/003small.jpg": "['images/003medium.jpg','images/003.jpg']" };
    var divImg = '<div class="divStyle">';
    for (var key in Date) {
        divImg += '<img src="'+ key +'" />';
    }
    divImg += '</div>';
    document.body.innerHTML += divImg;
}


<a href="javascript:backGround()">背景</a>

引用 2 楼 u013104499 的回复:

谢谢啊，我试了一下，比之前好多了，但是三张图片为什么是叠加到一起的？

Hello World, 2014-10-05

打赏
举报

引用 2 楼 u013104499 的回复:

谢谢啊，我试了一下，比之前好多了，但是三张图片为什么是叠加到一起的？

CSS里面设置的坐标都是一样的，当然重叠在一起了

MnZlZ 2014-10-05

打赏
举报

引用 4 楼 save4me 的回复:


function backGround() {
    var Date = { "images/001small.jpg": "['images/001medium.jpg','images/001.jpg']", "images/002small.gif": "['images/002medium.jpg','images/002.gif']", "images/003small.jpg": "['images/003medium.jpg','images/003.jpg']" };
    var divImg = '<div class="divStyle">';
    for (var key in Date) {
        divImg += '<img src="'+ key +'" />';
    }
    divImg += '</div>';
    document.body.innerHTML += divImg;
}


<a href="javascript:backGround()">背景</a>

引用 2 楼 u013104499 的回复:

谢谢啊，我试了一下，比之前好多了，但是三张图片为什么是叠加到一起的？

这段代码显得更加简练了，受教了，谢了啊

MnZlZ 2014-10-05

打赏
举报

引用 3 楼 apollokk 的回复:

[quote=引用 2 楼 u013104499 的回复:] 谢谢啊，我试了一下，比之前好多了，但是三张图片为什么是叠加到一起的？

CSS里面设置的坐标都是一样的，当然重叠在一起了[/quote] 恩恩，发现了。。。测了好多遍，刚开始学就是不容易

MnZlZ 2014-10-05

打赏
举报

引用 5 楼 KK3K2005 的回复:

[quote=引用 2 楼 u013104499 的回复:] 谢谢啊，我试了一下，比之前好多了，但是三张图片为什么是叠加到一起的？

你希望是什么样子呢？你每张图片外面的div全用了class= divStyle 最终效果就是叠加要横着走 divStyle { position:static; float:left; height:150px; width:600px; border-style:solid; border-width:thin; border-color:Blue; } [/quote] 嗯，还真是这样，最后我在for循环中动态的添加了img，这样就可以了，谢了啊！

KK3K2005 2014-10-05

打赏
举报

引用 2 楼 u013104499 的回复:

谢谢啊，我试了一下，比之前好多了，但是三张图片为什么是叠加到一起的？

MnZlZ 2014-10-04

打赏
举报

谢谢啊，我试了一下，比之前好多了，但是三张图片为什么是叠加到一起的？

KK3K2005 2014-10-04

打赏
举报

for (var key in Date) { var divImg = document.createElement("div"); // var img = document.createElement("img"); divImg.className = "divStyle"; divImg.innerHTML = "<img src="+key+" />";//问题就出现在这里了 document.body.appendChild(divImg); }

大学物理册答案上下都有

1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

Suno AI 是一家领先的人工智能（AI）公司，专注于开发创新的语音技术和解决方案。以下是关于 Suno AI 的资源描述：语音识别技术：Suno AI 拥有先进的语音识别技术，能够准确地将语音转换为文本。他们的语音识别系统经过了大量的训练和优化，具有高度的准确性和鲁棒性，可应用于多种场景，如语音助手、语音搜索、智能客服等。语音合成技术：除了语音识别，Suno AI 还致力于开发自然、流畅的语音合成技术。他们的语音合成系统能够生成高质量、逼真的语音输出，可以用于语音助手、自动化客服、有声书等领域。智能语音应用开发：Suno AI 提供了一系列工具和平台，帮助开发者快速构建和部署智能语音应用。他们的开发工具包括 API 接口、SDK、开发文档等，支持多种编程语言和平台，让开发者可以轻松地集成语音功能到自己的应用中。行业解决方案：Suno AI 为各行各业提供定制化的语音解决方案，满足客户特定的需求和业务场景。他们与零售、金融、医疗等领域的企业合作，提供智能语音客服、语音导航、语音支付等解决方案，帮助客户提升服务质量和效率。

基于matlab的射线信道模型内含数据集.zip

基于Lidar数据的概率占位栅格图(Occupancy+Grid+Map)+Python代码实现.pdf