核心推荐

以下两个是功能最强大、社区最活跃的插件,是您的首选。

jquery 网页预览插件下载地址
（图片来源网络，侵删）

jQuery Preview (by Bootstrap)

这是最经典、使用最广泛的网页预览插件，它通过一个悬浮的、带阴影的 <div> 元素来展示链接的目标页面。

特点

  • 经典稳定：经过多年发展，非常稳定,兼容性好。
  • 简单易用：API 简单,几行代码即可实现。
  • 高度可定制：可以自定义预览窗口的大小、边距、加载中的图片等。
  • 依赖 jQuery：正如其名，需要 jQuery 库支持。

下载地址

您可以通过以下几种方式获取：

  1. 官方 GitHub (推荐)：这是获取最新源代码和完整文档的最佳方式。

  2. 通过 CDN (最方便)：如果您只是想在项目中快速使用，可以直接在 HTML 中引入 CDN 链接,无需下载。

    jquery 网页预览插件下载地址
    （图片来源网络，侵删）
    <!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery Preview CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-preview/0.5.0/jquery.preview.min.css">
<!-- jQuery Preview JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-preview/0.5.0/jquery.preview.min.js"></script>

快速使用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery Preview 示例</title>
    <!-- 1. 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 2. 引入插件 CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-preview/0.5.0/jquery.preview.min.css">
    <style>
        body { font-family: sans-serif; padding: 40px; }
        a { color: #007bff; text-decoration: none; }
        a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>鼠标悬停在下方链接上查看预览</h1>
    <p>
        <a href="https://www.github.com" data-preview-container="#preview-container">GitHub</a> |
        <a href="https://www.stackoverflow.com" data-preview-container="#preview-container">Stack Overflow</a> |
        <a href="https://www.jquery.com" data-preview-container="#preview-container">jQuery 官网</a>
    </p>
    <!-- 预览内容将显示在这里 -->
    <div id="preview-container"></div>
    <!-- 3. 引入插件 JS 并初始化 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-preview/0.5.0/jquery.preview.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化预览插件
            $('a[data-preview-container]').preview({
                // 可以在这里配置选项，
                // container: '#preview-container' // 也可以通过 data 属性指定
            });
        });
    </script>
</body>
</html>

PageSlide

这个插件的功能更加强大，它不是悬浮显示，而是通过一个类似侧边栏或抽屉的效果，将目标网页“滑入”到当前页面的一个层中。

特点

  • 沉浸式体验占据整个屏幕或指定区域,体验更好。
  • 多种模式：支持从左侧、右侧、顶部或底部滑入。
  • 移动端友好：对触摸设备有良好的支持。
  • 依赖 jQuery：需要 jQuery 和 jQuery UI (用于动画效果)。

下载地址

同样，推荐从 GitHub 获取。

快速使用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">PageSlide 示例</title>
    <!-- 1. 引入 jQuery 和 jQuery UI -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <!-- 2. 引入 PageSlide CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pageslide/1.0.9/pageslide.min.css">
    <style>
        body { font-family: sans-serif; padding: 40px; }
        .trigger { color: #007bff; cursor: pointer; text-decoration: underline; }
        #slide-content { /* 可以自定义预览窗口的样式 */ }
    </style>
</head>
<body>
    <h1>点击下方链接查看 PageSlide 预览</h1>
    <p>
        <span class="trigger" data-href="https://www.github.com">打开 GitHub</span> |
        <span class="trigger" data-href="https://www.wikipedia.org">打开 Wikipedia</span>
    </p>
    <!-- 预览内容将显示在这里，初始时为空 -->
    <div id="slide-content"></div>
    <!-- 3. 引入 PageSlide JS 并初始化 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pageslide/1.0.9/pageslide.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.trigger').click(function(e) {
                e.preventDefault();
                var url = $(this).data('href');
                // 使用 PageSlide 打开 URL
                $.pageslide({
                    direction: "right", // 从右侧滑入
                    href: url,
                    iframe: true, // 在 iframe 中加载，避免样式冲突
                    modal: true, // 点击遮罩层关闭
                    onShow: function() {
                        console.log("PageSlide 显示了");
                    },
                    onHide: function() {
                        console.log("PageSlide 隐藏了");
                    }
                });
            });
        });
    </script>
</body>
</html>

其他选择

ThumbGrid

如果您想要的是一个缩略图网格预览效果，而不是单个预览窗口,那么这个插件很合适。

如何选择？

插件名称 预览方式 优点 缺点 适用场景
jQuery Preview 悬浮窗口 简单、轻量、快速实现 预览窗口较小，信息有限 博客文章列表、新闻链接、产品列表等快速预览。
PageSlide 侧边栏滑入 体验好、信息展示完整、可定制性强 依赖 jQuery UI，文件稍大，实现稍复杂 产品详情页、文章阅读、需要查看完整页面但又不想跳转的场景。
ThumbGrid 缩略图网格 视觉效果好，适合展示多个选项 不适合展示大段文本 图片画廊、选择器、多选项卡预览。

总结与建议

  1. 首选 GitHub：对于任何开源项目，GitHub 都是获取最新代码、报告问题、阅读源码和文档的最佳来源。
  2. 使用 CDN：如果您只是想在个人项目或快速原型中测试，CDN 是最方便快捷的方式,无需任何下载和配置。
  3. 明确需求：
    • 如果只是想快速、简单地给链接加个预览，用 jQuery Preview。
    • 如果想提供更佳、更沉浸式的用户体验，让用户在当前页面就能“进入”另一个页面，用 PageSlide。

希望这些信息能帮助您找到合适的插件！

jquery 网页预览插件下载地址
（图片来源网络，侵删）