圖片放大鏡效果實現(xiàn)過程詳解

由項目需要，原生寫了個詳情頁圖片放大鏡的效果，扔上代碼供學(xué)習(xí)分享，也作為日常筆記...

效果如圖(例子中偷偷鏈了張?zhí)熵埖膱D片，希望沒啥事 -。-)：

實現(xiàn)過程教簡單，但我們還是從css開始分析，過程如下（圖片已正方形為例）：

css：

    /* 圖片容器 */
    .imgBox{
      width: 200px; /* 各位大老爺們看著辦 */
      height: 200px; /* 各位大老爺們看著辦 */
      position: relative; /* 必需 */
    }    /* 圖片標(biāo)簽 */
    .mainImg{
      width: 100%; /* 各位大老爺們看著辦，盡量100%好看些[斜眼笑] */
      height: 100%; /* 各位大老爺們看著辦，盡量100%好看些[斜眼笑] */
    }    /* 遮罩層-既放大區(qū)域 */
    .glass{
      position: absolute; /* 必需 */
      width: 50px; /* 遮罩層寬度 此處是放大4倍，所以為200/4=50 */
      height: 50px; /* 遮罩層高度 此處是放大4倍，所以為200/4=50  */
      top: -9999px; /* 絕對位置，先放遠(yuǎn)些 */
      left: -9999px; /* 絕對位置，先放遠(yuǎn)些 */
      cursor: move; /* 鼠標(biāo)樣式，好看些 */
      background: rgba(0,0,180,0.5); /* 遮罩層樣式，好看些 */
    }    /* 大圖所在的容器 */
 &nb
        
		

        		
網(wǎng)友評論
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		學(xué)習(xí)是年輕人改變自己的最好方式