• 【插件】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;
                });
  • 相关阅读:
    WebApi系列知识总结
    用Jquery选择器计算table中的某一列某一行的合计
    layui table指定某一行样式
    数据库-SqlServer 行转列,列转行
    数据库缓存之Memcache知识点
    hdu 2471 简单DP
    nyist0j 35 表达式求值
    html 实现网址链接
    nyist 220 推桌子
    nyist 500 一字棋
  • 原文地址:https://www.cnblogs.com/qiuyueding/p/8297654.html
Copyright © 2020-2023  润新知