主要是为了记录下需求中解决问题的思路,本人前端相当糟糕.
问题的产生是由于图片太长,页面一次性展示不全,业务人员提出修改前端图片显示中的鼠标滚动改为上下移动.由于项目中图片展示使用的是viewer,js插件,本以为viewer提供类似的支持,但在网上搜到的都是基础教程和 配置使用,官方的文档恕我能力不够,看着有点头晕,没有找到自己想要的部分,如果有哪位大神找到请告知下小弟我,不胜感激.
言归正传,既然在既有的插件文档里找不到快捷的解决方案,那换个思路,我想到的是换个插件吧,但是这样的话涉及的页面和js代码改动比较大,而且考虑到用户体验,换个插件可能业务人员使用起来不习惯,.----方案不通过.
两种方案都没什么成效,小弟只能硬着头皮看源码,不然说no估计要卷铺盖走人了.
还好viewer.js源码写的比较好,可能是我水平太差,本屌丝尽然看懂了一部分…
首先看下主要的部分,触发滚轮的事件
上面四个就是主要的事件申明,其实关于滚轮的事件只有 EVENT_WHEEL ,而EVENT_MOUSEDOWN,EVENT_MOUSEMOVE,EVENT_MOUSEUP 这三个事件是鼠标拖动事件,为啥要看这个,是因为vierwerjs中图片是可以通过鼠标拖动的!!!这很重要,既然鼠标可以拖动图片移动,那么同理鼠标拖动的方法可能就可以用在鼠标滚轮移动上.
(ps:不得不说人家写的就比较仔细了,我写js从来没有考虑到浏览器兼容问题,一路莽到底,测试妹妹找我说换了浏览器不能用,我才想起来还有兼容问题)
首先找到滚轮事件有哪些地方在调用
还好只有两个地方,不然本屌丝就绝望了, 第一个.on就很好认,给页面控件设置触发函数,第二个是删除控件函数,果断直接看wheel函数
这段也是为兼容考虑的,真细心…
代码具体本屌就不从头捋了,大家都是大神小弟不献丑了,主要看最后执行的函数
函数看了下是做图片放缩控制的,具体怎么实现的就不说了,本屌自己也没仔细看,毕竟业务需求要紧,找到罪魁祸首了,那么就看下理论上的救星管用吗
就是他,我们的小哪吒,还好也只有两个地方调用(ps:本屌不会承认,开始没理解三个鼠标操作都看了一遍)
一样的果断跟进函数看内涵
非常好,嗯本屌差点忍不住,笑了(自己菜,嘲笑自己,我好多都不太熟悉,),(我是这样安慰自己的,毕竟本屌后端开发,前端接触的少)
前面的我都忽律了,看下 最后的方法change
进入方法中’move’这个单词深深的吸引了我,其它都是浮云,不要怂点进去
这不就是我要找的大舅哥吗 ,offsetX横向偏移量,offsetY纵向偏移量
然后代码写的很简单,就是修改左间距和上间距
然后回到我们的wheel方法
// 暂不修改,此处为ctrl+ 滚轮 放大缩小,单独滚轮为移动
//var iv = num(this.options.ivValue) // 偏移量
// if((e.deltaY || e.wheelDelta || e.detail) && event.ctrlKey){
// this.zoom(-delta * ratio, true, event);
// }else {
// event.preventDefault();
// this.move(0, -delta * iv);
// }
结果闪亮登场,就是注释掉的那些代码,(为了显示本屌也很细心,我也加了兼容,虽然我写的比较low,但注释我写的中文,主要英语不会写),
为啥把代码注释掉,这个原因非常有影响力,因为业务和产品不要图片,对,他们要pdf,把页面转为pdf!!!