學會偷懶,并懶出境界是提高工作效率最有效的方法!
Ctrl + D 收藏我吧~
CSS3+jQuery鼠標跟隨圖片懸停效果,能夠判斷鼠標移入的方向,遮罩可以按移入的方向出現,也可以從反方向出現,可設定延遲值。兼容主流瀏覽器,懶人圖庫推薦下載!
使用方法:
1、在head區域引入樣式表文件lrtk.css, style.css
2、引入jquery.min.js和modernizr.custom.97074.js, jquery.hoverdir.js(函數庫)
3、引入HTML <div class="container">...</div>
<li>
<a href="http://www.cxj168.com/">
<img src="images/12.jpg" />
<!-- 標語 -->
<div><span>Seahorse by Trevor Basset</span></div>
</a>
</li>
4、引入javascript代碼
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir({
hoverDelay : 50, // 控制延遲
inverse : true // 是否反方向出現
}); } );
});
可單獨設定某個li元素
$('li').hoverdir({
hoverDelay : 50, // 控制延遲
inverse : true // 是否反方向出現
});