jQuery网页预览

Question

jQuery网页预览

gri*_*egs 25 jquery jquery-plugins

有没有人知道一个允许你滚动锚链接并看到网页预览的插件？

所以基本上我们可能在页面上有一个链接说www.mysite.com,当你滚动链接时我想看到网站的预览.

我知道有插件可以显示一个图像文件,但我正在寻找可以预览实时页面的内容.

编辑

我想看一下页面的缩略图.

Answer 1

cra*_*2be 61

如果您确实想要预览实时页面,则必须使用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>

Run Code Online (Sandbox Code Playgroud)

玩得开心 :)

复制并粘贴到浏览器的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>

Run Code Online (Sandbox Code Playgroud)

和数据的+1:URL栏中的HTML ...之前从未见过!甜蜜! (12认同)
+1不仅因为它是一个很好的答案,而且还因为能够在缩小版Google中搜索"hello world"的新颖性. (4认同)

归档时间：	15 年，6 月前
查看次数：	51632 次
最近记录：	11 年，8 月前