Question

我用这个：

<html>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    setInterval('reloadImages()', 2000); // 2 seconds
});
function reloadImages()
{
   $('#picone').attr('src', 'http://www.someserver/pic.jpg?' + Math.random());
}

</script>

<title>Webcam</title>
</head>
<body>
<div id="first">
<img src="pic.jpg" id="picone" border="1" />
<div>
</body>
</html>

如何复制/克隆图片并将其显示在第二个/第三个/第四个...无论什么div？

Answer 1

如果图片保持不变（我认为它是？），那么你不需要克隆它。所以，如果您还有两个图像，例如：

<img src="pic.jpg" id="pictwo" border="1" />
<img src="pic.jpg" id="picthree" border="1" />

然后你可以这样做：

$('#picone, #pictwo, #picthree').attr('src', 'http://www.someserver/pic.jpg?' + Math.random());

这当然可能不是你想要的......

Answer 2

我想你的第二，第三，第四...... div结构的HTML如下所示：

<div id="first">
    <img src="pic.jpg" id="picone" border="1" />
</div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

然后你可以这样做：

$(document).ready(function(){
    $('#second, #third, #fourth').each(function(){
        $(this).prevAll("#first").children("img").clone().appendTo($(this));
    });
});

如何从网络摄像头重新加载图片并将其显示在多个div中？

2 个答案: