通过单击链接而不是被调整大小的项目来调整大小
问题描述:
我刚开始学习JavaScript,因此如果有人能够帮助我解决这个问题,我将不胜感激。通过单击链接而不是被调整大小的项目来调整大小
我目前有一个调整动画,当iframe本身被点击时发生。我想对其进行修改,以便在按下“调整大小”链接时调整大小,正如iframe本身所预计的那样,但我无法使其工作。
在此先感谢
$("iframe").click(function() {
var p = $(this).parent();
p.append('<iframe src="' + $(this).attr("src") +
'" alt="' + $(this).attr("alt") + '" class="preview" />');
var i = $("iframe.preview", p);
var maxWidth = i.width();
var maxHeight = i.height();
i.css({ width: $(this).width(), height: $(this).height() });
i.css({ top: $(this).position().top, left: $(this).position().left });
i.show();
i.animate({ marginTop: -((maxHeight/2) - (i.height()/2)),
marginLeft: -((maxWidth/2) - (i.width()/2)),
width: maxWidth,
height: maxHeight }, 800);
return false;
});
html, body {
height:100%;
text-align:center;
}
iframe {
margin:0 auto;
border:#444 40px solid;
border-radius:30px;
}
#resize {
position: absolute;
top:0;
left:0;
}
.preview {
width: 1024px;
height: 524px;
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="resize" href="#">resize</a>
<iframe src="https://css-tricks.com" align="middle" frameborder="0" style="width: 768px; height: 524px;"></iframe>
</div>
答
变化$("iframe").click(...)
到$("a").click(...)
,或通过其ID:$("#resize").click(...)
(这是更好,因为前者会附加一个单击事件处理程序ALL的<a>
的(#)
使用'$(“#resize”)。click(...)'在链接的位置创建一个调整大小的iframe,而不是调整ori的大小ginal iframe – Nty