使用jQuery-ui预览图片

最新推荐文章于 2025-06-15 10:05:14 发布

snow_small

最新推荐文章于 2025-06-15 10:05:14 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/snow_small/article/details/79150369

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用jQuery-ui库实现图片预览功能。首先，提供了jQuery-ui的官方下载地址，然后讲解了在本地 Laravel 环境下引入所需文件的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、官网下载地址：http://jqueryui.com/download/

2、引入文件，本地环境是laravel：

<link rel="stylesheet" href="{{ '/public/jquery-ui/jquery-ui.min.css' }}">
<script type="text/javascript" src="{{ '/public/jquery-ui/jquery-ui.min.js' }}"></script>

3、有一个容器，用来放图片：

<div id="showDetail" style="display:none"><img src="" id="showImg" alt=""></div>

4、函数处理：

function showImg(name, path)
        {
            $('#showImg').attr("src", path);
            $('#showDetail').dialog({
                height: 'auto',
                width: 'auto',
                position: {my:"center", at:"center", collision:"fit"},
                modal: false,  // 是否模式对话框
                draggable: true,   // 是否允许拖拽
                resizable: true,   // 是否允许拖动
                title: name,   // 对话框标题
                show: "slide",
                hide: "explode"
            });
        }

5、效果