这是一个有点奇怪的问题,但我想让一个圆圈(或某种形状)围绕 iframe 弹跳并且只暴露圆圈的内部。
那么我该怎么做呢
- 使其不大于圆圈(意味着 iframe 不占用空间)
- 似乎在更大的 Canvas 上“弹跳”?
获得使用此代码的卷轴。现在我只需要制作一个弹跳功能!
$(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
最佳答案
如果您构建来自另一个域的内容,您将遇到一些跨域问题。这是一篇如何滚动不在您域中的 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;
});
它不是弹跳,而是一个开始。
关于jquery - 棘手的 iframe View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16402598/