如何將不透明度應用於非活動滑塊項目？

我正在使用Anything滑塊（https://github.com/ProLoser/AnythingSlider/wiki），並且我已經對其進行了編輯，以便訪問者可以看到之前的圖像被過濾到中間。爲了這篇文章的目的，中間幻燈片被分類爲「活動」幻燈片，並且圖像任一側被歸類爲非活動狀態。看到代碼在這裏：http://jsfiddle.net/JCQ6Q/7/如何將不透明度應用於非活動滑塊項目？

我一直在試圖做的是將CSS不透明度應用到'非活動'幻燈片，以便這些圖像比中間'活躍'圖像更不可見。當用戶點擊左側或右側箭頭以使非活動圖像滑入中間時，我希望中間「活動」圖像處於完全可見狀態。之前的「活動」圖像將變爲不活動狀態，因此變得不太明顯。等等......

有沒有反正使用Javascript或CSS來做到這一點？我不是最偉大的編碼器，只嘗試過CSS方式，但它不夠靈活，無法適應不同的瀏覽器寬度。

來源

2012-01-20 egr103

添加以下內容：

.panel{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */ 
    filter: alpha(opacity=50); /* IE 5-7 */ 
    opacity: 0.5; /* Other browsers */ 
} 

.panel.activePage{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */ 
    filter: alpha(opacity=100); /* IE 5-7 */ 
    opacity: 1; /* Other browsers */ 
}

希望這有助於。

來源

2012-01-20 13:08:10

這也是一種享受。我不是一個超級粉絲，但滑塊的使用需要它。謝謝你的幫助！！ – egr103

添加以下行到你的CSS：

#slider .panel{ 
    opacity: 0.1; 
} 

#slider .activePage{ 
    opacity: 1; 
    }

來源

2012-01-20 13:00:50 dimitril

這是一種享受。乾杯! – egr103

如何將不透明度應用於非活動滑塊項目？

回答

相關問題