代码之家 › 专栏 › 技术社区 › griegs

jquery网页预览[副本]

jquery-plugins jquery

griegs · 技术社区 · 14 年前

这个问题已经有了答案:

How to show live preview in a small popup of linked page on mouse over on link? 6答

有人知道一个插件可以让你翻过一个锚链接并看到网页的预览吗?

所以本质上,我们可能在网页上有一个链接,比如www.mysite.com,当你翻过链接时,我想看看这个网站的预览。

我知道有插件显示给你一个图像文件,但我正在寻找一些东西,将预览现场页面。

编辑

我想看看这页的缩略图。

3 回复 | 直到 10 年前

crazy2be 11 年前

如果你真的想要预览一个实时页面,你必须使用一个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>

玩得开心:

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

gotnull mzelina 10 年前

qtip是jquery框架的工具提示插件。它是跨浏览器,可定制和打包的功能。

http://craigsworks.com/projects/qtip/demos/content/thumbnail

更新:

qtip 1.0很快就会过时…退房 qTip2 preview .

Gert Grenander Keiron Lowe 14 年前

更多缩略图服务位于 Free Website Thumbnail Services . 但它们可能仍然会缓存图像,就像WebSnapr一样。

推荐文章

Ravindra Bhanderi · 如何在Laravel的CKEditor中上载图像,并在服务器端上载图像

7 年前

Hello Folks · jQuery可调整大小的插件游标损坏

7 年前

Vanjith · jQuery jqplot-如何创建标签的多行

7 年前

Joshua Paul Barnard · 使用append在jQuery插件中创建覆盖

7 年前

Abilash Erikson · 如何在前端拍摄包含用户上传图像的div的截图?

7 年前

Jiga · 如何使用jQuery插件制作一个小时倒计时计时器

7 年前

g5wx · 初始化后更新jQuery插件设置

7 年前

prabha · 直接在网站中打开和编辑csv文件

7 年前

John · 如何定义jQuery validate setDefaults

7 年前

Sandeep Maharjan · 如何在Jquery验证插件中使用ajaxUserCall函数

8 年前