CSS3+jQuery鼠標跟隨圖片懸停效果 零玖玖教育

CSS3+jQuery鼠標跟隨圖片懸停效果，可以判斷鼠標移入的方向，遮罩能夠按移入的方向出現，也能夠從反方向出現，可設定延遲值。兼容主流瀏覽器，懶人圖庫推薦下載！

 

使用方法：

一、在head區域引入樣式表文件lrtk.css, style.css

二、引入jquery.min.js和modernizr.custom.97074.js, jquery.hoverdir.js(函數庫)

三、引入HTML <div class="container">...</div>

<li>

<a href="http://www.lanrentuku.com/">

<img src="images/12.jpg" />

<!-- 標語 -->

<div><span>Seahorse by Trevor Basset</span></div>

</a>

</li>

四、引入javascript代碼

 

$(function() {

 

$(' #da-thumbs > li ').each( function() { $(this).hoverdir({

hoverDelay : 50, // 控制延遲

inverse : true // 是否反方向出現

}); } );

 

});

 

可單獨設定某個li元素

$('li').hoverdir({

hoverDelay : 50, // 控制延遲

inverse : true // 是否反方向出現

});