jQuery插件——imgbox（点击图片查看大图）

2021-5-21 前端达人

需要对应的js代码和css样式，大家可以通过www.htmldrive.net平台下载，也可以在我文章的底部下载。对应的资源如下，将资源引入页面（别忘了JQuery）：

注意：jQuery最好使用1.3版本的，有些版本行不通，亲测1.8版本不行

HTML代码：

js代码：


    

        

            

                

                

            

            

                
                    $(".test").imgbox({
                

            

        

        

            

                

                

            

            

                
                    'speedIn': 500,
                

            

        

        

            

                

                

            

            

                
                    'speedOut': 500,
                

            

        

        

            

                

                

            

            

                
                    'alignment': 'center',
                

            

        

        

            

                

                

            

            

                
                    'overlayShow': true,
                

            

        

        

            

                

                

            

            

                
                    'allowMultiple': false,
                

            

        

        

            

                

                

            

            

                
                    'autoScale': true
                

            

        

        

            

                

                

            

            

                
                    });

效果：

讲解：

以上例子中，我们只用了一行js代码“$(".test").imgbox();”，就实现了图片弹出放大效果。这是因为在jquery.imgbox.js中imgbox()函数有默认的参数。当我们调用函数但没有传递参数时，会加载默认的参数，显示默认效果和样式。

如果觉得默认样式不合适，有两种方式进行修改：1、修改jquery.imgbox.js中imgbox()函数的默认参数；2、调用imgbox()函数时，给参数赋值。


    

        

            

                

                

            

            

                
                    //在jquery.imgbox.js中，默认参数如下，可以修改：
                

            

        

        

            

                

                

            

            

                
                    $.fn.imgbox.defaults = {
                

            

        

        

            

                

                

            

            

                
                    padding : 10,
                

            

        

        

            

                

                

            

            

                
                    alignment : 'auto', // auto OR center
                

            

        

        

            

                

                

            

            

                
                    allowMultiple : true,
                

            

        

        

            

                

                

            

            

                
                    autoScale : true,
                

            

        

        

            

                

                

            

            

                
                    speedIn : 500,
                

            

        

        

            

                

                

            

            

                
                    speedOut : 500,
                

            

        

        

            

                

                

            

            

                
                    easingIn : 'swing',
                

            

        

        

            

                

                

            

            

                
                    easingOut : 'swing',
                

            

        

        

            

                

                

            

            

                
                    zoomOpacity : false,
                

            

        

        

            

                

                

            

            

                
                    overlayShow : false,
                

            

        

        

            

                

                

            

            

                
                    overlayOpacity : 0.5,
                

            

        

        

            

                

                

            

            

                
                    hideOnOverlayClick : true,
                

            

        

        

            

                

                

            

            

                
                    hideOnContentClick : true
                

            

        

        

            

                

                

            

            

                
                    };

参数的含义：

padding：弹窗中图片的边框，0为没有边框。
alignment：弹窗的位置，“auto”或“center”，默认情况下，它从缩略图所在方向扩展弹窗
allowMultiple：如果选true，允许多个弹出窗口同时打开
autoScale：如果为true，弹窗会自适应窗口的大小
speedIn、speedOut:打开弹窗和关闭弹窗的速度，单位：毫秒
zoomOpacity：如果为true，会在弹窗缩放时改变透明度
overlayShow：如果为true，会有遮罩层（默认为false；遮罩层的颜色在css中设置）
overlayOpacity:遮罩层的透明度（取值范围0~1）
hideOnOverlayClick：当点击遮罩层时，关闭弹窗
hideOnContentClick：当点击图片时，关闭弹窗

转载自：https://blog.csdn.net/kangnan00/article/details/72518352

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。