<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          jQuery插件——imgbox（點擊圖片查看大圖）
          
				
           2021-5-21      前端達人      
          
			
          
			
          
				
          
    需要對應的js代碼和css樣式，大家可以通過www.htmldrive.net平臺下載，也可以在我文章的底部下載。對應的資源如下，將資源引入頁面（別忘了JQuery）：

          

          
    注意：jQuery最好使用1.3版本的，有些版本行不通，親測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();”，就實現了圖片彈出放大效果。這是因為在jquery.imgbox.js中imgbox()函數有默認的參數。當我們調用函數但沒有傳遞參數時，會加載默認的參數，顯示默認效果和樣式。

          

          
    如果覺得默認樣式不合適，有兩種方式進行修改：1、修改jquery.imgbox.js中imgbox()函數的默認參數；2、調用imgbox()函數時，給參數賦值。

          

          

          
    
            

        
          1. 

            
            

                
            

                
            

            
            

            
            

                
            
                    //在jquery.imgbox.js中，默認參數如下，可以修改：
                
            

            
            

        
            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. 

    
          

          

          

          
    參數的含義：

          

          
    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設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
    
          
    
          
        截屏2021-05-13 上午11.41.03.png
          
          
    
          
    
          
        
          
          
    
          
    
          
        
    
          
    
          
        文章來源：csdn   
    
          
    
          
        分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    
          

    
          
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    
          
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合