jQuery插件——imgbox（點(diǎn)擊圖片查看大圖）

2021-5-21    前端達(dá)人

需要對(duì)應(yīng)的js代碼和css樣式，大家可以通過www.htmldrive.net平臺(tái)下載，也可以在我文章的底部下載。對(duì)應(yīng)的資源如下，將資源引入頁面（別忘了JQuery）：

注意：jQuery最好使用1.3版本的，有些版本行不通，親測(cè)1.8版本不行

HTML代碼：

 

 

js代碼： 


    
    

        
  1. 

            
    

                
    

                
    

            
    

            
    

                
    
                    $(".test").imgbox({
                
    

            
    

        
    2. 

        
  2. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'speedIn': 500,
                
    

            
    

        
    3. 

        
  3. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'speedOut': 500,
                
    

            
    

        
    4. 

        
  4. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'alignment': 'center',
                
    

            
    

        
    5. 

        
  5. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'overlayShow': true,
                
    

            
    

        
    6. 

        
  6. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'allowMultiple': false,
                
    

            
    

        
    7. 

        
  7. 

            
    

                
    

                
    

            
    

            
    

                
    
                    'autoScale': true
                
    

            
    

        
    8. 

        
  8. 

            
    

                
    

                
    

            
    

            
    

                
    
                    });
                
    

            
    

        
    9.


效果：

 

 

講解：

以上例子中，我們只用了一行js代碼“$(".test").imgbox();”，就實(shí)現(xiàn)了圖片彈出放大效果。這是因?yàn)樵趈query.imgbox.js中imgbox()函數(shù)有默認(rèn)的參數(shù)。當(dāng)我們調(diào)用函數(shù)但沒有傳遞參數(shù)時(shí)，會(huì)加載默認(rèn)的參數(shù)，顯示默認(rèn)效果和樣式。

如果覺得默認(rèn)樣式不合適，有兩種方式進(jìn)行修改：1、修改jquery.imgbox.js中imgbox()函數(shù)的默認(rèn)參數(shù)；2、調(diào)用imgbox()函數(shù)時(shí)，給參數(shù)賦值。 


    
    

        
  1. 

            
    

                
    

                
    

            
    

            
    

                
    
                    //在jquery.imgbox.js中，默認(rèn)參數(shù)如下，可以修改：
                
    

            
    

        
    2. 

        
  2. 

            
    

                
    

                
    

            
    

            
    

                
    
                    $.fn.imgbox.defaults = {
                
    

            
    

        
    3. 

        
  3. 

            
    

                
    

                
    

            
    

            
    

                
    
                    padding : 10,
                
    

            
    

        
    4. 

        
  4. 

            
    

                
    

                
    

            
    

            
    

                
    
                    alignment : 'auto', // auto OR center
                
    

            
    

        
    5. 

        
  5. 

            
    

                
    

                
    

            
    

            
    

                
    
                    allowMultiple : true,
                
    

            
    

        
    6. 

        
  6. 

            
    

                
    

                
    

            
    

            
    

                
    
                    autoScale : true,
                
    

            
    

        
    7. 

        
  7. 

            
    

                
    

                
    

            
    

            
    

                
    
                    speedIn : 500,
                
    

            
    

        
    8. 

        
  8. 

            
    

                
    

                
    

            
    

            
    

                
    
                    speedOut : 500,
                
    

            
    

        
    9. 

        
  9. 

            
    

                
    

                
    

            
    

            
    

                
    
                    easingIn : 'swing',
                
    

            
    

        
    10. 

        
  10. 

            
    

                
    

                
    

            
    

            
    

                
    
                    easingOut : 'swing',
                
    

            
    

        
    11. 

        
  11. 

            
    

                
    

                
    

            
    

            
    

                
    
                    zoomOpacity : false,
                
    

            
    

        
    12. 

        
  12. 

            
    

                
    

                
    

            
    

            
    

                
    
                    overlayShow : false,
                
    

            
    

        
    13. 

        
  13. 

            
    

                
    

                
    

            
    

            
    

                
    
                    overlayOpacity : 0.5,
                
    

            
    

        
    14. 

        
  14. 

            
    

                
    

                
    

            
    

            
    

                
    
                    hideOnOverlayClick : true,
                
    

            
    

        
    15. 

        
  15. 

            
    

                
    

                
    

            
    

            
    

                
    
                    hideOnContentClick : true
                
    

            
    

        
    16. 

        
  16. 

            
    

                
    

                
    

            
    

            
    

                
    
                    };
                
    

            
    

        
    17.

參數(shù)的含義：

padding：彈窗中圖片的邊框，0為沒有邊框。
alignment：彈窗的位置，“auto”或“center”，默認(rèn)情況下，它從縮略圖所在方向擴(kuò)展彈窗
allowMultiple：如果選true，允許多個(gè)彈出窗口同時(shí)打開
autoScale：如果為true，彈窗會(huì)自適應(yīng)窗口的大小
speedIn、speedOut:打開彈窗和關(guān)閉彈窗的速度，單位：毫秒
zoomOpacity：如果為true，會(huì)在彈窗縮放時(shí)改變透明度
overlayShow：如果為true，會(huì)有遮罩層（默認(rèn)為false；遮罩層的顏色在css中設(shè)置）
overlayOpacity:遮罩層的透明度（取值范圍0~1）
hideOnOverlayClick：當(dāng)點(diǎn)擊遮罩層時(shí)，關(guān)閉彈窗
hideOnContentClick：當(dāng)點(diǎn)擊圖片時(shí)，關(guān)閉彈窗

 

 

轉(zhuǎn)載自：https://blog.csdn.net/kangnan00/article/details/72518352


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


文章來源：csdn   

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至：

日歷

鏈接

個(gè)人資料

存檔