Question

我正在开发一个网站，允许用户分享他们的艺术作品，无论是照片还是插图。事情是 - 弹出窗口太小，无法看到艺术的全部荣耀。所以当你点击图像时，我决定这样做，它会变成全尺寸，看到它就可以将它拖到两侧。出于某种原因，当您拖动照片时，它会跳跃。

这是网站（点击照片然后尝试拖动它）：http://www.isrart.co.il/SO （请等到图像加载）

编辑：我注意到当我把图像的高度设置得更大然后它的宽度时，它的效果非常好，但两者的代码几乎相同（除了asix的asix）滚动和宽度/高度）;

编辑2：现在我注意到它在IE和FF上完美运行。那真是怪了。那么如何修复它以使用Chrome？

这是JS：

$.fn.click2resize = function(){
    $(this).click(function(){
        var f = $(this),
            i = f.children("img");

        if (i.height() == i.width()) return false;
        if (i.height() > i.width()) {
            if (i.hasClass("big")) 
                i.animate({ height: f.height(), width: getNew("width", i, f.height()), top: "50%", left: "50%", "margin-top": 0 - f.height() * 0.5, "margin-left": 0 - getNew("width", i, f.height()) * 0.5 })
                 .removeClass("big")
                 .draggable("destroy")
                 .attr("data-move", "");
            else 
                i.addClass("big").animate({ height: getNew("height", i, f.width()), width: f.width(), "margin-top": 0, "margin-left": 0, top: 0 - getNew("height", i, f.width()) / 2 + f.height() / 2, left: 0 })
                 .draggable({ 
                    axis: "y", 
                    drag: function (e, ui) { 
                        if (ui.position.top > 0) ui.position.top = 0; 
                        if (ui.position.top < 0 - i.height() + f.height()) ui.position.top = 0 - i.height() + f.height(); 
                    } 
                 })
                 .attr("data-move", "top");
        } else {
            if (i.hasClass("big"))
                i.animate({height: getNew("height", i, f.width()), width: f.width(), top: "50%", left: "50%", "margin-top": 0 - getNew("height", i, f.width()) * 0.5, "margin-left": 0 - f.width() * 0.5})
                 .removeClass("big")
                 .draggable("destroy")
                 .attr("data-move", "");
            else
                i.addClass("big")
                 .animate({height: f.height(), width: getNew("width", i, f.height()), "margin-top": 0, "margin-left": 0, top: 0, left: 0 -  getNew("width", i, f.height()) / 2 + f.height() / 2})
                 .draggable({ 
                    axis: "x", 
                    drag: function (e, ui) { 
                        if (ui.position.left > 0) ui.position.left = 0; 
                        if (ui.position.left < 0 - i.width() + f.width()) ui.position.left = 0 - i.width() + f.width();  
                    }
                 })
                 .attr("data-move", "side");
        }
    });
}

抱歉我的英文不好，谢谢！

jQuery UI可拖动Chrome上的“跳跃”

0 个答案: