使用CSS和JQuery創建頁面之間的滑動操作

Question

我試圖模擬HTML + CSS + JQuery中的智能手機滑動導航。 我設置了幾個包含我的HTML頁面的iframe，然後從導航菜單中在它們之間滑動。這很好，但我想從I幀裏面的按鈕激活刷卡（以下簡稱「回到菜單」的例子按鈕）

這是我做過什麼，到目前爲止： Example

的代碼我用於創建刷卡效果是：

JQuery的：

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

我可以做這樣的事情，但與按鈕從I幀裏面？

注：在每一頁我將有一個內部刷卡效果，以及：這將由div的，而不是I幀之間滑動，所以改變給定的I幀進入的div可能會無法正常工作來實現。

Answer 1

您可以將寫入的內容轉換爲函數，然後從iframe中調用該函數。

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

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

---

注意你的iframe和網站必須有這個工作相同的域。