微插件推荐系列:jquery.mousewheel
发布时间:2016-09-16 编辑:jiaochengji.com
教程集为您提供微插件推荐系列:jquery.mousewheel等资源,欢迎您收藏本站,我们将为您提供最新的微插件推荐系列:jquery.mousewheel资源
综合概述
一个兼容性强,代码极少的鼠标滚轮插件
兼容性
IE6+、Chrome、Firefox、Safari、Opera
框架依赖
依赖框架:jquery
模块支持
支持AMD、node和浏览器
使用介绍
1.使用方法很简单,仅仅把mousewheel
绑定到指定元素上。示例代码如下:
// using on
$('#my_elem').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
// using the event helper
$('#my_elem').mousewheel(function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
2.它提供了两个很有帮助事件mousewheel和unmousewheel来封装了滚轮的事件:使用方法如下:
//绑定mousewheel事件
$('#my_elem').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
//解除mousewheel事件
$('#my_elem').unmousewheel(fn)
3.阻止事件冒泡,如果只想在某个元素上捕捉事件,而不想冒泡到document上,这样浏览器的滚动条就不会发生滚动了。事件代码如下:
//阻止冒泡
$('#my_elem').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
return false;
});
4.获取滚动的方向,示例代码如下:
if (delta > 0)
o += ' up (' + delta + ')';
else if (delta < 0)
o += ' down (' + delta + ')';
if (event.deltaY > 0)
o += ' north (' + event.deltaY + ')';
else if (event.deltaY < 0)
o += ' south (' + event.deltaY + ')';
if (event.deltaX > 0)
o += ' east (' + event.deltaX + ')';
else if (event.deltaX < 0)
o += ' west (' + event.deltaX + ')';
5.可以通过event.deltaFactor获取滚动的距离,代码如下:
$('#my_elem').on('mousewheel', function(event) {
console.log(event.deltaFactor);
return false;
});
下载连接
https://github.com/jquery/jquery-mousewheel
授权信息
授权类型:MIT
授权类型信息:https://github.com/jquery/jquery-mousewheel/blob/master/LICENSE.txt
更改日志
https://github.com/jquery/jquery-mousewheel/blob/master/ChangeLog.md
其他补充
一个很不错的的插件,值得推荐
您可能感兴趣的文章:
上一篇:jQuery无缝滚动
下一篇:微插件推荐系列:jquery.cookie
[关闭]