问题描述
|
我有一个包含两个DIV元素的HTML页面。我想以一种方式排列这两个,以便其中一个占据整个页面,另一个在浏览器右上方显示为一个小的预览框。当用户单击预览时,该DIV的内容将与占据页面的DIV交换。
div元素是Google小部件。 (带注释的时间轴,运动图等)。
编辑:
我正在使用wdm提供的方法来解决上述问题。现在的问题是我有一个IFRAME,我想与DIV元素交换。我将IFRAME放在DIV标签中,如下所示
<div class=\"b small\">
<iframe src=\"http://somerandomsite.com\" name=\"framename\" id=\"frameid\"> </iframe>
</div>
iframe的尺寸未正确调整。我认为这是因为CSS格式无法在iframe元素上正常工作。
有什么想法可以调整iframe的大小,以便更改点击大小?
解决方法
请查看演示,然后单击小框。基本上,我只是通过jQuery在两个
div
元素之间交换类。
演示:http://jsfiddle.net/wdm954/dRzaU/1/
编辑:带有图像的演示:http://jsfiddle.net/wdm954/dRzaU/4/
jQuery的...
$(\'.small\').live(\'click\',function() {
$(\'.big\').addClass(\'small\').removeClass(\'big\');
$(this).removeClass(\'small\').addClass(\'big\');
});
HTML ...
<div id=\"wrap\">
<div class=\"a big\"></div>
<div class=\"b small\"></div>
</div>
CSS(请参阅演示)
,您可以通过具有四个div来实现此目的-两个全尺寸的div和两个缩略图。您的标记可能如下所示:
<div id=\"thumb1\"> ... </div>
<div id=\"thumb2\"> ... </div>
<div id=\"fullsize1\"> ... </div>
<div id=\"fullsize2\"> ... </div>
然后设置javascript侦听器在两者之间切换。如果您使用的是jQuery,则它们可能看起来像这样。
$(\'#thumb1\').click(function() {
$(this).hide();
$(\'#thumb2\').show();
$(\'#fullsize1\').show();
$(\'#fullsize2\').hide();
});
$(\'#thumb2\').click(function() {
$(\'#thumb1\').show();
$(this).hide();
$(\'#fullsize1\').hide();
$(\'#fullsize2\').show();
});