欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

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設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。