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)"); 
     });
 });

我可以使用iframes中的按钮吗？

注意：在每个页面中我也会有一个内部滑动效果：这将通过在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和网站必须具有相同的域才能生效。

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

1 个答案: