京东自营 + 国补 iPhone 历史最低价          国家补贴 享8折

CSS3+jQuery鼠标跟随图片悬停效果

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://nowjava.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 // 是否反方向出现

});

下载方法:
1、请用微信扫描下方二维码关注时代Java公众号,或者微信搜索时代JavaNowJava关注。
    (如已经关注,请直接发送编号)
2、在时代Java公众号里发送编号:5167
5167
3、发送后,将立刻收到 “验证码已经接收成功” 的回复,即可选择线路下载:
通用网络下载移动网络下载电信网络下载

本文系作者在时代Java发表,未经许可,不得转载。

如有侵权,请联系nowjava@qq.com删除。

编辑于

关注时代Java

关注时代Java