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

Question

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

这是我目前所做的:示例

我用来创建滑动效果的代码是: 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和站点必须具有相同的域才能正常工作