jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)事件的圖片透明效果【附demo源碼下載】
本文實(shí)例講述了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)事件的圖片透明效果。分享給大家供大家參考,具體如下:
實(shí)現(xiàn)的思想:
1、當(dāng)鼠標(biāo)放在圖片上面的時(shí)候觸發(fā)mouseover mouseenter兩個(gè)事件(圖片變得透明)
2、當(dāng)鼠標(biāo)離開圖片的時(shí)候觸發(fā)mouseleave mouseout兩個(gè)事件(圖片變?yōu)椴煌该鳎?/p>
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function(){ $("#img_id").bind("mouseover mouseenter",function(){ $(this).fadeTo("slow", 0.66); }); $("#img_id").bind("mouseleave mouseout",function(){ $(this).fadeTo("fast", 1); }); } ); </script> <title>圖片透明</title> </head> <img src="logo.gif" id="img_id" height="78" width="215"/> <body> </body> </html>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery動(dòng)畫animate方法使用介紹
- jquery animate 動(dòng)畫效果使用說明
- JQuery動(dòng)畫animate的stop方法使用詳解
- jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例
- 分享8款優(yōu)秀的 jQuery 加載動(dòng)畫和進(jìn)度條插件
- 基于jquery創(chuàng)建的一個(gè)圖片、視頻緩沖的效果樣式插件
- jQuery實(shí)現(xiàn)橫向帶緩沖的水平運(yùn)動(dòng)效果(附demo源碼下載)
- Jquery網(wǎng)頁內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼
- jquery多行滾動(dòng)/向左或向上滾動(dòng)/響應(yīng)鼠標(biāo)實(shí)現(xiàn)思路及代碼
- jquery實(shí)現(xiàn)的帶縮略圖的焦點(diǎn)圖片切換(自動(dòng)播放/響應(yīng)鼠標(biāo)動(dòng)作)
- jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)滾動(dòng)的動(dòng)感菜單效果
- jQuery實(shí)現(xiàn)的鼠標(biāo)響應(yīng)緩沖動(dòng)畫效果示例
相關(guān)文章
JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁代碼效率初探
JQuery構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁代碼效率初探!2010-01-01擴(kuò)展easyui.datagrid,添加數(shù)據(jù)loading遮罩效果代碼
easyui可以說是輕量級的前端UI框架,更新到1.2.1支持更多的事件,方法和屬性2010-11-11jQuery中g(shù)et和post方法傳值測試及注意事項(xiàng)
jQuery 的 get 和 post 方法有三個(gè)參數(shù):地址,數(shù)據(jù) 和回調(diào)函數(shù),剛剛做了幾個(gè)實(shí)驗(yàn),看看下面的代碼就清楚了2014-08-08jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題
本文主要介紹jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題,通過第三方的json2.js做到兼容,需要的朋友可以參考下。2016-05-05jQuery實(shí)現(xiàn)高亮顯示網(wǎng)頁關(guān)鍵詞的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)高亮顯示網(wǎng)頁關(guān)鍵詞的方法,涉及jquery針對頁面字符串的遍歷與正則替換的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08