以鼠标缩略图的形式显示网页

我正在设计一个网站，其中有很多子页面。因此，当用户悬停我需要在工具提示中将相应的网页显示为缩略图的链接时，链接将放置在单个页面上。以鼠标缩略图的形式显示网页

我试过可能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

以鼠标缩略图的形式显示网页

回答

相关问题