長沙網(wǎng)站制作常用JS之遮罩層效果在最近的項目的，基本上都需要在首頁展示公司目前銷量不錯，或者主推產(chǎn)品。既然放在首頁的話，也就代表著屬于重要組成部分，那么鼠標的滑過效果自然就不能少了。當然，鼠標的滑過也可以用CSS的hover屬性來實現(xiàn)，在不考慮CSS3的情況下，單單只是hover屬性難免有些單調(diào)。如果說不考慮IE8版本及以下瀏覽器的話，滑過效果完全可以用CSS3代替。不過今天，主要講解一下最近項目中常用的兩個鼠標滑過時給對應(yīng)元素添加遮罩層的JS。

一、JS控制對應(yīng)元素滑出如下圖，當前JS控制的是當鼠標滑過.cp-bulli時，觸發(fā)事件，首先給li加上hover的樣式，然后給當前l(fā)i中的樣式名為downbox的DIV觸發(fā)事件，top值為0，也就是從將downbox的DIV由底部滑出。效果如圖2所示，downbox的DIV覆蓋在了原有的li之上。

一、JS控制對應(yīng)元素用CSS3動畫效果顯示除了JS效果之外，目前主流的CSS3也可以實現(xiàn)遮罩層的效果，當然，本次小編所用的效果的話，只是用到了某一個CSS3屬性。代碼如下圖1，代碼方面比較簡單，主要就是當鼠標滑過.lboxulli時，fadeIn方法使用淡入效果來顯示被選元素，這樣.mark的遮罩層就有了。顯示效果如下圖2。圖1圖2以上兩款圖片的遮罩層效果是不是很簡單呢，JS代碼方面也比較少，也不會與其他的輪播或者選項卡JS沖突哦。