jquery 图片预览插件

本文介绍了一个基于jQuery的图片预览插件,该插件能够实现鼠标悬停时显示图片预览效果,支持自定义预览窗口的尺寸,并且可以处理多种图片格式。

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

写着玩的,哎,每次写的东西都不是那么完美,算了,当学习

效果图:

//图片预览插件
//Writer:lyfeixue
//2009-5-25 11:29:17
//参数:options json对象,w:显示的宽度,h:显示的高度,如果高度或者宽度为空,则调用原始的图片大小
//调用方法 $("#VenLogo").PicturePreview();
//$("#VenLogo").PicturePreview(w:0,h:0);默认显示图片的原始高宽

//$("#VenLogo").PicturePreview(w:300,h:300);自定义显示出来的图片高宽
//bug:只能调用第一个对象的图片URL,如果传入了多个jquery对象,有待解决
(function($) {
    $.fn.PicturePreview = function(options) {
        var o = $.extend({
            w: 200,
            h: 200
        }, options);
        var _this = this;
        var allowExt = ["jpg", "png", "bmp", "gif"]; //定义允许的图片参数
        var isCheck = false; //是否校验通过图片
        _this.mousemove(function(e) {
            var FileUrl = _this.val();
            if (FileUrl == "" || FileUrl == null) { FileUrl = _this.html() == "" || _this.html() == null ? _this.text() : _this.html(); }
            var arrList = FileUrl.split(".");
            isCheck = new RegExp(allowExt.join("\|"), "ig").test(arrList[arrList.length - 1]);
            if (isCheck) {
                var obj = $("#Ly_PicturePreview");
                if (obj.size() == 0) {
                    //创建预览对象
                    $("body").append("<img id=\"Ly_PicturePreview\" alt=\"图片预览\" style=\"border:1px solid gray;position:absolute;display:none;z-index:999;\" src=\"" + FileUrl + "\" />");
                }
                else {
                    obj.attr("src", FileUrl);
                }
                obj.css({ top: e.pageY + 5, left: e.pageX + 5, width: o.w == 0 ? obj.width() : o.w, height: o.h == 0 ? obj.height() : o.h }).show();
            }
        }).mouseout(function() {
            $("#Ly_PicturePreview").hide();
        });
        return _this;
    };
})(jQuery);

转载于:https://www.cnblogs.com/lyfeixue/archive/2009/05/25/1488777.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值