使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋

更新時(shí)間：2015年03月16日 15:33:45 投稿：hebedich

這篇文章主要介紹了使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋，效果非常棒，小伙伴們做相冊(cè)的時(shí)候可以直接拿走使用。

默認(rèn)九宮格圖片排列效果，當(dāng)鼠標(biāo)懸停在圖片上后，會(huì)從圖片的上方下滑一個(gè)半透明遮罩的效果

同時(shí)出現(xiàn)一些文字介紹

使用方法：

1、將head中的css樣式引入到你的網(wǎng)頁(yè)中
2、將代碼部分拷貝到你的網(wǎng)頁(yè)body結(jié)束前的地方即可
(js、圖片采用絕對(duì)路徑，不建議修改)

復(fù)制代碼代碼如下:

$(function(){

    $('.sgw_img dt').hover(function(){

        $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);

    },function(){

        $(this).children('.box').stop(true,true).animate({'top':-482,opacity:0},200);

    })

    $('.sgw_img dd').hover(function(){

        $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);

    },function(){

        $(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);

    })

})

以上就是本文分享的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)checkbox全選全不選的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery實(shí)現(xiàn)checkbox全選全不選的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
JQuery異步加載PartialView的方法
這篇文章主要介紹了JQuery異步加載PartialView的方法,涉及jQuery與asp.net交互及異步操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-06-06
基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能的相關(guān)資料,輸入數(shù)值自動(dòng)匹配相關(guān)信息，感興趣的小伙伴們可以參考一下
2016-05-05
JQuery通過(guò)AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中
這篇文章主要介紹了JQuery通過(guò)AJAX從后臺(tái)獲取信息顯示在表格上并支持行選中的相關(guān)資料,需要的朋友可以參考下
2015-09-09
jquery彈出遮掩層效果【附實(shí)例代碼】
下面小編就為大家?guī)?lái)一篇jquery彈出遮掩層效果【附實(shí)例代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧
2016-04-04
jQuery dataTables與jQuery UI 對(duì)話框dialog的使用教程
這篇文章主要介紹了jQuery dataTables與jQuery UI 對(duì)話框dialog的使用教程的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
jQuery函數(shù)的等價(jià)原生函數(shù)代碼示例
原生方法明顯要比jQuery方法快，因?yàn)閖Query方法要處理瀏覽器兼容以及其他一些事情，如果你針對(duì)的是現(xiàn)代瀏覽器，那么使用原生方法會(huì)使性能有很大的提升
2013-05-05
JQuery中$.ajax()方法參數(shù)詳解及應(yīng)用
JQuery中$.ajax()方法想必大家并不陌生吧，在本文將為大家介紹下其參數(shù)及應(yīng)用示例，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
jQuery ajaxForm()的應(yīng)用
Ajax在Web應(yīng)用中的作用越來(lái)越大，這讓采用AJAX方式提交一個(gè)表單的過(guò)程簡(jiǎn)單的不能再簡(jiǎn)單了，需要的朋友可以了解一下。
2016-10-10
xheditor與validate插件沖突的解決方案
xheditor和validate都是優(yōu)秀的jQuery插件，但將兩者組合到起，如果初始化的順序不當(dāng)，則會(huì)出現(xiàn)一些微妙的結(jié)果。
2010-04-04