javascript - 在鼠标悬停时将网页显示为缩略图

标签 javascript jquery ajax iframe

我正在设计一个有很多子页面的网站。因此,当用户将鼠标悬停在链接上时,链接将放置在单个页面上,我需要在工具提示中将相应的网页显示为缩略图。

我试过 jquery 插件,但它们仅提供基于图像的缩略图 View 。

我在下面看到

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> 

将它放在浏览器的地址栏上将在 iframe 中加载网页。但我不知道如何使上面的代码与 ajax 一起工作。

谢谢。

最佳答案

来源:jQuery Webpage Preview

<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>

关于javascript - 在鼠标悬停时将网页显示为缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16235974/

相关文章:

javascript - 表行循环计算

javascript - 在 Promise 构造函数范围之外解析 Javascript Promise

javascript - 外部 javascript 文件不工作

javascript - 查找/替换德克萨斯州内所见即所得

javascript - <a> onload 的替代方案是什么?

javascript - 如何从字符串值调用作用域上的函数

javascript - Google map Javascript API/街景 FOV

jquery - HTML 导入错误

PHP实时聊天与ajax轮询

javascript - 使用 ajax php mysql 使用 html 链接单击更新数据库