javascript - 通过单击链接而不是正在调整大小的元素来动画调整大小

Question

我刚开始学习 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>

Answer 1

更改 $("iframe").click(...)至 $("a").click(...) ，或通过其 ID:$("#resize").click(...) (这更好，因为前者会将点击事件处理程序附加到页面中的所有 <a> 。