zoukankan      html  css  js  c++  java
  • 【插件】jQuery.iviewer----图片浏览(滚动放大缩小问题解决)

    做项目的时候使用到一个图片浏览的插件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;
                });
  • 相关阅读:
    内存分配略谈
    变量声明顺序和指针偏移问题示例
    解决You have to be inside an Angular CLI project in order to use the serve command
    Linux中将命令放到全局
    Linux设置vim显示行号
    根据指定的excel模板导出数据
    解决 Maven工程运行报错Failed to clean project: Failed to delete
    springcloud工作用常用到的一些注解
    cmd窗口备份mysql数据库
    调用存储过程msql
  • 原文地址:https://www.cnblogs.com/qiuyueding/p/8297654.html
Copyright © 2011-2022 走看看