jQuery 网页预览
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3162815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Webpage Preview
提问by griegs
Does anyone know of a plugin that allows you to roll over an anchor link and see a preview of the webpage?
有谁知道一个插件可以让你滚动锚链接并查看网页的预览？
So essentially we may have a link on the page to say www.mysite.com and when you roll over the link I'd like to see a preview of the site.
所以基本上我们可能在页面上有一个链接，说 www.mysite.com，当您滚动链接时，我希望看到该站点的预览。
I know there are plugins out there that show you an image file but I'm looking for something that will preview the live page.
我知道有一些插件可以向您显示图像文件，但我正在寻找可以预览实时页面的东西。
Edit
编辑
I'd like to see a thumbnail of the page.
我想看看页面的缩略图。
回答by crazy2be
If you actually want a preview of the live page, you'll have to use an iframe. If you just want an image preview, Fulvio's suggestion will work, but won't show a "live" preview (i.e., no animations that you would normally see, if the user is logged in to a page, you will only see the front page, etc). It is possibleto actually scale the contents of an iframe so that it's a thumbnail, thus achieving the effect you want. For example:
如果您确实想要预览实时页面，则必须使用 iframe。如果你只是想要一个图像预览，Fulvio 的建议会起作用，但不会显示“实时”预览（即，没有你通常会看到的动画，如果用户登录到一个页面，你只会看到前面页等）。这是可能的实际规模的iframe的内容，因此，这是一个缩略图，从而达到你想要的效果。例如：
<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>
Have fun :)
玩得开心 ：）
Copy and paste into your browser's URL bar to preview:
复制并粘贴到浏览器的 URL 栏中进行预览：
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>
回答by fulvio
qTip is a tooltip plugin for the jQuery framework. It's cross-browser, customizable and packed full of features.
qTip 是 jQuery 框架的工具提示插件。它是跨浏览器的、可定制的并且功能齐全。
http://craigsworks.com/projects/qtip/demos/content/thumbnail
http://craigsworks.com/projects/qtip/demos/content/thumbnail
UPDATE:
更新：
qTip 1.0 will soon be obsolete... check-out the qTip2 preview.
qTip 1.0 很快就会过时...查看qTip2 预览。
回答by Gert Grenander
More thumbnail services at Free Website Thumbnail Services. But they might still cache images, just like WebSnapr.
免费网站缩略图服务中的更多缩略图服务。但它们可能仍然缓存图像，就像 WebSnapr 一样。
