1.首先应用jQuery库 ,不做详细介绍
2引用jQuery的mousewheel库,这里面是这个库的源码,使用时直接拷贝过去就可以了:
(function(a){
function d(b){
var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;
return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),
c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),
c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),
d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];
if(a.event.fixHooks)
for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;
a.event.special.mousewheel={setup:function(){
if(this.addEventListener)
for(var a=b.length;a;)
this.addEventListener(b[--a],d,!1);
else this.onmousewheel=d},teardown:function(){
if(this.removeEventListener)
for(var a=b.length;a;)
this.removeEventListener(b[--a],d,!1);
else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){
return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)
3下面是我们调用mousewheel中的方法
$('.gys').mousewheel(function (event, t) { //t表示滚动的方向
if (t> 0) {
$(this).css('backgroundColor', 'red');
} else {
$(this).css('backgroundColor', 'blue');
}
return false; //return false即可
});
4.html代码:
<h1 style="width:100%; border:1px solid red;" class="gys">鼠标放到这个地方,前后滚动观察效果</h1>