做项目的时候使用到一个图片浏览的插件jQuery.iviewer,链接地址:http://www.jq22.com/jquery-info4580
效果如下:
但是应用的时候出现不能滚动放大缩小的问题,查看代码的时候发现封装的滚轮判断事件有点问题,返回的delta都为0,然后对jquery.iviewer.js的代码做了一些修改:
1、添加函数addWheelEvent来判断滚动方式
/** * nomousewheel **/ // 兼容所有浏览器 addWheelEvent: function (obj,efn){ //判断IE8还是非IE8 if(document.addEventListener){ //火狐还是非火狐 var oDiv = document.createElement("div"); if(oDiv.onmousewheel === null){ obj.addEventListener("mousewheel",fn,false); }else{ obj.addEventListener("DOMMouseScroll", fn, false); } }else{ obj.attachEvent("onmousewheel", fn); } function fn(ev){ ev = ev || window.event; var d = ev.wheelDelta/120 || -ev.detail/3; var rs = efn.call(obj,ev,d); if(rs === false){//禁止滚动条默认事件 ev.preventDefault && ev.preventDefault(); return false; } } },
2、修改_create函数中的滚动事件:注释‘mousewheel.iviewer‘方法,改用前面新增的方法addWheelEvent
if (this.options.mousewheel) { // this.container.bind(‘mousewheel.iviewer‘, function(ev, delta) var obj = this.container.get(0);//将jQuery对象转化为DOM对象 this.addWheelEvent(obj,function(ev,delta)//使用新增方法 { //this event is there instead of containing div, because //at opera it triggers many times on div var zoom = (delta > 0)?1:-1, container_offset = me.container.offset(), mouse_pos = { //jquery.mousewheel 3.1.0 uses strange MozMousePixelScroll event //which is not being fixed by jQuery.Event x: (ev.pageX || ev.originalEvent.pageX) - container_offset.left, y: (ev.pageY || ev.originalEvent.pageX) - container_offset.top }; me.zoom_by(zoom, mouse_pos); return false; });
原文地址:https://www.cnblogs.com/qiuyueding/p/8297654.html
时间: 2024-10-10 08:12:25