jquery - 棘手的 iframe 视图

Question

这是一个有点奇怪的问题，但我想让一个圆圈（或某种形状）在 iframe 周围反弹，并且只暴露圆圈的内部。

那么我怎么能这样做呢

• 使其不大于圆圈（意味着 iframe 不占用空间）
• 似乎在更大的画布上“弹跳”？

让滚动条使用此代码。现在我只需要做一个反弹功能！

$(document).ready(function() {
  $('iframe').contents().find("html, body").animate({ scrollTop: 250 }, { duration: 'medium', easing: 'swing' });
})

感谢http://forum.jquery.com/topic/adjust-the-scroll-position-of-an-iframe

小提琴

Answer 1

如果您从另一个域构建内容，您将遇到一些跨域问题。这是一篇如何滚动不在您的域中的 iframe 的帖子： https ://stackoverflow.com/a/1656930/2033671

要反弹，您可以将项目的位置设置为绝对位置，然后移动其顶部和左侧 css 属性。

html

<div id="google">
    <iframe width="800" height="600" src="http://doc.jsfiddle.net/" scrolling="no" />
</div>

css

#google {
width: 100px;
height: 100px;
overflow: hidden;
border-radius:20%;
left:0px;
top:0px;
position:absolute;
}

js

$(document).ready(function () {
$frame = $('#google');
$frame.scrollTop(0).scrollLeft(0);
 $frame.animate({
    left: '+=100',
    top: '+=100'
}, {
    duration: 4000,
    step: function () {
        $frame.scrollLeft($frame.scrollLeft() + 1);
        $frame.scrollTop($frame.scrollTop() + 1);
    }
});
return false;
});

http://jsfiddle.net/accw5/5/

它不是弹跳，但它是一个开始。