demo

Question

我们正在寻找的是在页面上放置多个iFrame（或类似的东西），其中任何一个都悬浮在大小上。默认情况下，它们应该只显示页面的一部分。例如，大多数iFrame都有一些图表或图形。我想知道是否有一种方法让我只能看到图表/图表，另外当悬停在iFrame上时可以扩展宽度和高度。如果有人能提供关于jsp / jquery / java script / css或相关内容的任何推荐/指针/代码片段，我将非常感激。提前谢谢！

Answer 1

你可以尝试这个技巧，

CSS

iframe {
    width: 100%;
    height: 100%;
}

div {
    width: 300px;
    height: 200px;
}

div.hover {
    width: 400px;
    height: 300px;
}

HTML

<div>
    <iframe src="http://google.com"></iframe>
</div>

jquery的

$('div').hover(function(){
    $(this).addClass('hover');
},
function(){
    $(this).removeClass('hover');
});

demo

Answer 2

jQuery -

     $(document).ready(function() {
       $("#frame-1").mouseover(function() {
            $(this).attr({width: 800, 
                          height: 500});
            }).mouseleave(function() {
                $(this).attr({width: 300, 
                              height: 400});
                });
            });

w / HTML -

<html>
<head>
    <title>Frame Enlargementationing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function() {
           $("#frame-1").mouseover(function() {
                $(this).attr({width: 800, 
                              height: 500});
                }).mouseleave(function() {
                    $(this).attr({width: 300, 
                                  height: 400});
                    });
                });
    </script>
</head>
</html>
<body>

<h1>Hover:</h1>
<iframe id="frame-1" src="http://jquery.com/" width="300" height="400"></iframe>


</body>
</html>

Answer 3

你可以做一个CSS伪悬停类，使iframe更大。

例如：

iframe { 
width: 500px;
height: 700px;
}

iframe:hover {
width: 700px;
height: 900px;
}

我不能100％确定这是否适用于iframe ......但值得一试！

多个iFrame在悬停时放大

3 个答案:

demo