闲着的时候,突然想写个视觉落差的效果。遇到倒通了一些。
前期百度找到的都是原生实现素材
1.event.type(mousewheel//ie chrome opera,DOMMouseScroll//firefox);
2.事件绑定(原生)【我是基于jquery写的直接用on代替】
3.event.wheelDelta//ie chrome opera,event.Detail//firefox
素材已经找到开始写代码,初始代码
(function(){
$.fn.extend({
getmouseEventType:function(){
var type='';
if(document.mozHidden!==undefined){
type="DOMMouseScroll";
}else{
type="mousewheel"
}
return type;
},
mousewheelEvent:function(event){
var type = event.type;
if (type == 'DOMMouseScroll' || type == 'mousewheel') {
event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
}
return event;
}
});
})(jQuery)
$(window).on($.fn.getmouseEventType(),function(event){
var event=event||window.event;
var oEvent=$.fn.mousewheelEvent(event);
console.log(oEvent.delta)
//var event=$.fn.mousewheelEvent(event);
})
遇到问题,event事件触发一直有问题,于是console.log(event)的时候问题出来了。看到jquery重构了event事件,在originalEvent上保留了原生的方法。之前一直没有接触这块,所以比较迷茫。
可以清楚看到被jquery.event封装了一层皮,一般还真难发现。
修改后代码
(function(){
$.extend({
getmouseEventType:function(){
var type='';
if(document.mozHidden!==undefined){
type="DOMMouseScroll";
}else{
type="mousewheel"
}
return type;
},
mousewheelEvent:function(event){
var event=event||window.event,
type = event.type;
//jquery重写了event方法 找到原生方法
//event.originalEvent.wheelDelta--ie,chrome,opera
//event.originalEvent.detail--firefox
console.log(event)
if (type == 'DOMMouseScroll') {
event.delta=-(event.originalEvent.detail || 0) / 3;
}else if(type == 'mousewheel'){
event.delta=event.originalEvent.wheelDelta / 120;
}
return event;
}
});
})(jQuery)
$(window).on($.getmouseEventType(),function(event){
var oEvent=$.mousewheelEvent(event);
console.log(oEvent.delta)
})
Good!完成,以后牢记这件事儿。