展開/收起內容在網頁上[也加載上點擊內容]

我做一個頁面展開/收起內容在網頁上[也加載上點擊內容]

與pano2vr gardengnomesoftware.com/pano2vr.php

問題上做出有不同的全景網站是我想要在可展開的部分中隱藏每個全景。所以用戶可以向下滾動，然後打開他們想要的。

我一直在嘗試不同的展開/摺疊代碼，如這一個

http://www.adipalaz.com/experiments/jquery/expand.html

這

http://webcloud.se/code/jQuery-Collapse/

（我選擇了這些的原因是，他們有平滑的開放動畫，一個圖形可以改變以顯示它的開啓還是關閉，並且您可以一次打開多個[非手風琴風格]）

然而，第一個問題是如果全景圖處於摺疊區域，則不會加載全景圖。（如果我使用第二個腳本它有餅乾，並記得，如果一個部分是開放的，如果我打開全景圖片並刷新頁面，然後它將加載）

也我不想他們可展開部分內的全景圖/內容）在打開頁面時加載，因爲每個頁面可以是5MB +，因此當您展開該部分時，需要以某種方式加載該部分中的內容。（不幸的是，全景Flash和HTML5自動加載）

這是我用來加載一個頁面上的全景代碼：

<script type="text/javascript"> 
     // hide URL field on the iPhone/iPod touch 
     function hideUrlBar() { 

      if (window.pageYOffset==0) { 
       window.scrollTo(0, 1); 
       // repeat every second for slow rendering pages 
       setTimeout(function() { hideUrlBar(); }, 3000); 

      } 
     } 
    </script>

和

 <script type="text/javascript" src="pano2vr_player.js"> 
    </script> 
    <script type="text/javascript" src="skin.js"> 
    </script> 
    <div id="container" style="width:960px;height:540px;"> 
    This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher. 
    </div> 
    <script type="text/javascript"> 

     // create the panorama player with the container 
     pano=new pano2vrPlayer("container"); 
     // add the skin object 
     skin=new pano2vrSkin(pano); 
     // load the configuration 
     pano.readConfigUrl("some_panorama_name.xml"); 
     // hide the URL bar on the iPhone 
     hideUrlBar(); 

    </script>

我已經看到了一些東西用ajax，但我不確定如何將它全部綁定到jQuery來完成這項工作。

我也認爲我可以只在隱藏的部分有一個圖像，可以說，點擊這裏加載全景圖，然後使用一些代碼替換全景圖像，但我不知道我'那樣做？ AJAX？ IFRAME？

感謝您的閱讀！我想確保在發佈之前覆蓋了所有內容。

來源

2012-03-09 russian box

我試圖把內容變成一個iframe，有一個圖像說點擊這裏加載全景，但是當它加載全景時，全屏選項不起作用，因爲它試圖在其自己的iframe中全屏顯示，而不是瀏覽器窗口。愚蠢html5 – 2012-03-10 01:56:24

認爲我可能會發現一個解決方案： http://www.raymondcamden.com/index。cfm/2011/4/5 /可摺疊內容和Ajax的加載與jQuery的移動 – 2012-03-10 02:23:13

上述沒有按預期工作 – 2012-03-11 19:24:49

這些插件很可能會提供您可以插入的事件。如果是這樣，你可以添加一個事件處理程序到「onExpand」（我假設）事件，並使用jQuery的append（）和appendTo（）函數動態添加全景圖像。因此，當合攏面板擴展爲圖像添加標籤：

$("<img src='mypanorama.jpg' id='panorama1' />").appendTo("#collapsePanel1");

，然後當它被摺疊去除圖像標籤（按id）：

$("#panorama1").remove();

來源

2012-03-09 03:50:12 robbymurphy

嘿robbymurphy，感謝您的迴應，我明白你在說什麼，在jQuery方面是靈活的。不過，我只是一名攝影師。上一次我做任何網站工作是在2006年，然後它只是表格。我知道的唯一事情就是我需要鏈接到一個.js文件以供jQuery使用。所以我不知道如何實現你的建議。 – 2012-03-09 21:18:07

展開/收起內容在網頁上[也加載上點擊內容]

回答

相關問題