多个iFrame在悬停时会放大 [英] Multiple iFrames enlarges on hover
问题描述
我们正在寻找的是在页面上放置多个iFrame（或类似的东西），其中任何一个都悬浮在大小上。默认情况下，它们应该只显示页面的一部分。例如，大多数iFrame都有一些图表或图形。我想知道是否有办法让我只看到图表/图表，另外当悬停在iFrame上时可以扩展宽度和高度。如果有人能提供关于jsp / jquery / java script / css或相关内容的任何推荐/指针/代码片段，我将非常感激。提前致谢！
What am looking for is to have multiple iFrames (or something similar) on a page, any of which when hovered over enlarges in size. By default, they should only show part of the page.For example, most of the iFrames will have some charts or graphs. I was wondering if there was a way for me to only see the chart/graph and additionally when hovered-over the iFrame can expand in width and height. Would highly appreciate if anyone can provide any recommendation/pointers/code snippets about the same revolving around jsp/jquery/java script/css or something related. Thanks in advance!
推荐答案
jQuery -
jQuery -
$(document).ready(function() {
$("#frame-1").mouseover(function() {
$(this).attr({width: 800,
height: 500});
}).mouseleave(function() {
$(this).attr({width: 300,
height: 400});
});
});
w / HTML -
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>
这篇关于多个iFrame在悬停时会放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
