JQuery實(shí)現(xiàn)鼠標(biāo)移動(dòng)圖片顯示描述層的方法
更新時(shí)間：2015年06月25日 10:29:27 作者：任意球
這篇文章主要介紹了JQuery實(shí)現(xiàn)鼠標(biāo)移動(dòng)圖片顯示描述層的方法,涉及jQuery鼠標(biāo)事件及動(dòng)畫效果的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了JQuery實(shí)現(xiàn)鼠標(biāo)移動(dòng)圖片顯示描述層的方法。分享給大家供大家參考。具體如下：
這里可結(jié)合 JQuery easing 的動(dòng)畫來(lái)配合使用。
主要代碼如下：
$(".item").hover(
function()
{
//$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine");
$(this).children("div.title").stop().animate({top: 0}, 700, "easeOutBounce");
$(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce");
},
function(){
//$(this).children("img").stop().animate({opacity: 1}, 700);
$(this).children("div.title").stop().animate({top: -60}, 500);
$(this).children("div.desc").stop().animate({bottom: -40}, 400);
}
);
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JQuery獲取鼠標(biāo)進(jìn)入和離開(kāi)容器的方向
- jquery實(shí)現(xiàn)的提示浮層跟隨鼠標(biāo)移動(dòng)
- Jquery實(shí)現(xiàn)鼠標(biāo)移動(dòng)放大圖片功能實(shí)例
- jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動(dòng)
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片移動(dòng)特效
- jQuery 網(wǎng)易相冊(cè)鼠標(biāo)移動(dòng)顯示隱藏效果實(shí)現(xiàn)代碼
- Jquery創(chuàng)建層顯示標(biāo)題和內(nèi)容且隨鼠標(biāo)移動(dòng)而移動(dòng)
- jQuery鼠標(biāo)移動(dòng)圖片上實(shí)現(xiàn)放大效果
- jquery插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片右側(cè)顯示大圖的效果(類似淘寶)
- jQuery插件jFade實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)的圖片高亮其它變暗
- jQuery實(shí)現(xiàn)的響應(yīng)鼠標(biāo)移動(dòng)方向插件用法示例【附源碼下載】
相關(guān)文章
jquery寫個(gè)checkbox——類似郵箱全選功能
最近在學(xué)習(xí)jquery，今天抽空用jquery寫個(gè)checkbox——類似郵箱全選功能，感興趣的你可以參考下哈，希望可以幫助到你2013-03-03
此作品是一款jquery+html5實(shí)現(xiàn)的時(shí)鐘插件clock，效果非常棒，推薦給大家參考下，小伙伴們可以直接拿走使用。2015-04-04
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框使用說(shuō)明，需要的朋友可以參考下。2011-11-11
瀑布流布局在目前貌似很火爆，具體的分析、原理、用到的知識(shí)等等可以看看以下幾位牛人寫的東西2012-10-10
jQuery中操控hidden、disable等無(wú)值屬性的方法
在實(shí)現(xiàn)一些表單提交頁(yè)面時(shí)會(huì)放置若干隱藏屬性，下面為大家介紹下jQuery中如何操控hidden、disable等無(wú)值屬性，感興趣的朋友不要錯(cuò)過(guò)2014-01-01
本篇文章主要介紹了jQuery返回定位插件的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05
本篇文章是對(duì)文件編碼導(dǎo)致jquery失效的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
jQuery實(shí)現(xiàn)form表單序列化轉(zhuǎn)換為json對(duì)象功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)form表單序列化轉(zhuǎn)換為json對(duì)象功能,結(jié)合實(shí)例形式分析了表單數(shù)據(jù)傳輸中使用serializeJson進(jìn)行序列化操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
jQuery 網(wǎng)易相冊(cè)鼠標(biāo)移動(dòng)顯示隱藏效果實(shí)現(xiàn)代碼
顯示隱藏效果的實(shí)現(xiàn)主要是jquery層選擇器的應(yīng)用：當(dāng)鼠標(biāo)移動(dòng)經(jīng)過(guò)照片就顯示設(shè)為封面刪除，移開(kāi)后就隱藏，此效果在web開(kāi)發(fā)中經(jīng)常會(huì)用到，感興趣的朋友可以參考下哈2013-03-03
取得id為form1的form的所有輸入變量，然后使用for循環(huán)進(jìn)行數(shù)組遍歷，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-09-09