如何在链接上鼠标悬停的链接页面的小弹出窗口中显示实时预览？

Question

如何在链接上鼠标悬停的链接页面的小弹出窗口中显示实时预览？

像这样

http://cssglobe.com/lab/tooltip/03/

但实时预览

Answer 1

您可以使用iframe在鼠标悬停时显示页面预览.

http://jsbin.com/urarem/3/edit

HTML:

This live preview for <a href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover.

CSS:

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}

这是一个包含多个链接预览的示例.

Answer 2

您可以使用以下代码使用javascript显示链接的实时预览.

<embed src="https://www.w3schools.com/html/default.asp" width="60" height="40" />
<p id="p1"><a href="http://cnet.com">Cnet</a></p>
<p id="p2"><a href="http://codegena.com">Codegena</a></p>
<p id="p3"><a href="http://apple.com">Apple</a></p>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">     
  <script type="text/javascript">
    $(function() {
                $('#p1 a').miniPreview({ prefetch: 'pageload' });
                $('#p2 a').miniPreview({ prefetch: 'parenthover' });
                $('#p3 a').miniPreview({ prefetch: 'none' });
            });
  </script> <script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>

在Codegena了解更多相关信息

id="p1" - Fetch image preview on page load.
id="p2" - Fetch preview on hover.
id="p3" - Fetch preview image each time you hover.

Answer 3

您可以执行以下操作：

1. 创建（或查找）将 URL 呈现为预览图像的服务
2. 将鼠标悬停在该图像上加载并显示它
3. 如果您热衷于直播，请使用 jQuery 的计时器插件在一段时间后重新加载图像

当然这实际上并不是现场直播。

更明智的是，您可以为某些 URL（例如每天或每周）生成预览图像并使用它们。我想您不想手动执行此操作，并且您不想向服务的用户显示与网站当前外观完全不同的预览。