jQuery网页预览

参见英文答案 > How to show live preview in a small popup of linked page on mouse over on link?7个答案有没有人知道一个插件,允许您滚动锚链接并查看网页的预览?

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

我知道那里有插件显示一个图像文件,但我正在寻找将预览实时页面的东西。

编辑

我想看到页面缩略图

解决方法

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

玩的开心 :)

复制并粘贴到浏览器的网址栏中进行预览:

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插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...