jquery - 使用 CSS 和 JQuery 在页面之间创建滑动

Question

我正在尝试使用 HTML+CSS+JQuery 模拟智能手机的滑动导航。我正在设置几个包含我的 HTML 页面的 iframe，然后从导航菜单中在它们之间滑动。这很好，但我希望从 iframe 内的按钮激活滑动(示例中的“返回菜单”按钮)

这是我目前所做的: Example

我用来创建滑动效果的代码是:

JQuery:

$(document).ready(function() {
     $('#slide1_controls').on('click', 'button', function(){
         $("#slide1_images").css("transform","translateX("+($(this).index()-2) * -475+"px)"); 
     });
 });

我可以使用 iframe 中的按钮做类似的事情吗？

注意:在每个页面中，我也会有一个内部滑动效果:这将通过在 div 而不是 iframe 之间滑动来实现，因此将给定的 iframe 更改为 divs 可能不会工作。

Answer 1

您可以将您编写的内容转换为函数，然后从 iframe 内部调用该函数。

//// on parent page
function slidePage(){
    // slide logic goes here
}

//// inside iframe
$('#slide-control').on('click', function(){
    window.parent.slidePage()
});

---

请注意，您的 iframe 和网站必须具有相同的域才能正常工作。