jQuery 网页预览 [英] jQuery Webpage Preview
问题描述
有没有人知道一个插件可以让您滚动锚链接并查看网页预览?
Does anyone know of a plugin that allows you to roll over an anchor link and see a preview of the webpage?
所以基本上我们可能会在页面上有一个链接说 www.mysite.com，当您滚动链接时，我希望看到该网站的预览.
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.
我知道有一些插件可以向您显示图像文件，但我正在寻找可以预览实时页面的东西.
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.
编辑
我想查看页面的缩略图.
I'd like to see a thumbnail of the page.
推荐答案
如果你真的想要预览实时页面，你必须使用 iframe.如果您只想要图像预览，Fulvio 的建议将起作用，但不会显示实时"预览(即，没有您通常会看到的动画，如果用户登录到页面，您只会看到前面页等).可以实际缩放 iframe 的内容，使其成为缩略图，从而达到您想要的效果.例如:
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 possible to actually scale the contents of an iframe so that it's a thumbnail, thus achieving the effect you want. For example:
<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>
玩得开心:)
复制并粘贴到浏览器的 URL 栏中进行预览:
Copy and paste into your browser's URL bar to preview:
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>
这篇关于jQuery 网页预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
