使用 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 更改为 div 可能不会工作。

Answer 1

你可以把你写的东西变成一个函数，然后从 iframe 内部调用那个函数。

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

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

---

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