以鼠標縮略圖的形式顯示網頁

我正在設計一個網站，其中有很多子頁面。因此，當用戶懸停我需要在工具提示中將相應的網頁顯示爲縮略圖的鏈接時，鏈接將放置在單個頁面上。以鼠標縮略圖的形式顯示網頁

我試過可能jquery插件，但它們只提供基於圖像的縮略圖視圖。

我碰到下面

data:text/html,<html><head><!--[if IE]><style>iframe{zoom:0.2;}</style><![endif]--><style>iframe{width:800px;height:520px;border:none;-moz-transform:scale(0.2);-moz-transform-origin:0 0;-o-transform:scale(0.2);-o-transform-origin:0 0;-webkit-transform:scale(0.2);-webkit-transform-origin:0 0;}</style></head><body><iframe src="http://www.bing.com"></iframe></body></html>

過去，瀏覽器的地址欄會在加載網頁iframe.But我不知道如何讓上面的代碼工作與阿賈克斯。

謝謝。

來源

2013-04-26 krish

你嘗試使用URI作爲一個iframe的'src'屬性？ – Uby 2013-04-26 12:11:29

@Uby：是的，我使用的是 – krish 2013-04-26 12:13:06

如果你成功地把它放在一個iframe標籤中，使用jQuery設置'src'應該像$（'＃previewFrame'）一樣簡單。attr（'src'，'data： text/html ...'）' – Uby 2013-04-26 12:22:40

這個差不多similar question可能會幫助你。雖然它沒有實現之前使用的data屬性。

來源

2013-04-26 12:08:48 KevinIsNowOnline

來源：jQuery Webpage Preview

<html> 

    <head> 
     <!--[if IE]> 
      <style> 
       #frame { 
        zoom: 0.2; 
       } 
      </style> 
     <![endif]--> 
     <style> 
      #frame { 
       width: 800px; 
       height: 520px; 
       border: none; 
       -moz-transform: scale(0.2); 
       -moz-transform-origin: 0 0; 
       -o-transform: scale(0.2); 
       -o-transform-origin: 0 0; 
       -webkit-transform: scale(0.2); 
       -webkit-transform-origin: 0 0; 
      } 
     </style> 
    </head> 

    <body> 
     <iframe id="frame" src="http://www.bing.com"></iframe> 
    </body> 

</html>

來源

2013-04-26 12:16:50

你知道如何使代碼與Ajax一起工作嗎？ – krish 2013-04-26 12:20:39

以鼠標縮略圖的形式顯示網頁

回答

相關問題