使用jquery更改背景位置时的抖动

jitter when using jquery to alter background-position

本文关键字：抖动 位置 背景 jquery 使用      更新时间：2023-09-26

这是jsfiddle。

它是裁剪图像的界面。正如你所看到的，选择div采用相同的背景图像，并将其定位在选择div的顶部和左侧属性的负数处。理论上，这应该会产生完美的重叠，但当你移动选择div时会出现抖动，我似乎不知道是什么原因造成的。

html

<div id="main">
    <div id="selection"></div>
</div>

css

#main {
    width: 600px;
    height: 450px;
    position: relative;
    background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
    background-size: contain;
}
#selection {
    width: 100px;
    height: 100px;
    position: absolute;
    background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
    border: 1px dotted white;
    background-size: 600px 450px;
}

jquery

$(document).ready(function () {
    var move = false;
    var offset = [];
    var selection = null;
    $("#selection").mousedown(function (e) {
        move = true;
        selection = $(this);
        offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
    });
    $("#selection").mousemove(function (e) {
        if (move == true) {
            selection.css("left", e.pageX - offset[0]);
            selection.css("top", e.pageY - offset[1]);
            selection.css("background-position", (((-selection.position().left) - 1) + "px " + ((-selection.position().top  ) - 1) + "px"));
        }
    });
    $("#selection").mouseup(function (e) {
        move = false;
    });
})

似乎有一个5偏移值需要添加以确保无缝

演示http://jsfiddle.net/nzx0fcp5/2/

offset = [e.pageX - selection.offset().left + 5, e.pageY - selection.offset().top + 5];

因此，在进行实验时，我发现这只是图像大小特定时的问题。按照原来的尺寸，它没有问题，既不是这个尺寸的一半也不是四分之一。这不仅仅是一个保持图像比例的问题——没有图像的正方形或使用甚至像素大小。我认为这与部分像素大小有关，但我不确定，我看不出有任何方法可以解决这个问题，至少没有一种方法值得付出努力。

因此，在查看其他croppers的代码时，我看了一下POF的图像cropper，他们似乎完全不使用background position属性来解决这个问题（我不确定是插件还是他们自己编码的）。他们只需设置图像，然后使用一个透明的选择div，每个边都有4个div用于着色。因此，根本没有像素运算。我喜欢这个设计的简单性和轻量级，并亲自在jsfiddle中创建了一个版本，看看我是否能让它很好地工作。

新的无抖动jsfiddle无像素压缩

我也喜欢预览框的解决方案。

html

<body>
 <div id="main">
    <img src="http://flavorwire.files.wordpress.com/2012/01/scarlett_johansson.jpg" />
     <div id="upperShade" class="shade" > </div>
     <div id="leftShade" class="shade" > </div>
    <div id="selection"></div>
     <div id="rightShade" class="shade"></div>
     <div id="lowerShade" class="shade" ></div>
 </div>
</body>

css

#main {
   position:relative;
    width: 450px;
    height: 600px;
}
#selection {
    width: 148px;
    height: 148px;
    position: absolute;
    border: 1px dotted white;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.shade {
    background-color: black;
    opacity: 0.5;
    position: absolute;
}
#upperShade {
    top: 0px;
    left: 0px;
    width: 600px;
}
#leftShade {
    left: 0px;
    top: 0px;
    height: 150px;
    width: auto;
}
#rightShade {
    left: 150px;
    top: 0px;
    height: 150px;
    width: 450px;
}
#lowerShade {
    left:0px;
    top: 150px;
    width: 600px;
    height:  300px;
}

jquery

$(document).ready(function () {
    var move = false;
    var offset = [];
    var selection = null;
    $("#selection").mousedown(function (e) {
        move = true;
        selection = $(this);
        offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
    });
    $("#selection").mousemove(function (e) {
        if (move == true) {
            selection.css("left", e.pageX - offset[0]);
            selection.css("top", e.pageY - offset[1]);
            setShade();
        }
    });
    function setShade() {
        $("#upperShade").css("height", selection.position().top);
        $("#lowerShade").css("height", 600 - (selection.position().top + 150));
        $("#lowerShade").css("top", selection.position().top + 150);
        $("#leftShade").css("top", selection.position().top);
        $("#leftShade").css("width", selection.position().left);
        $("#rightShade").css("top", selection.position().top);
        $("#rightShade").css("left", selection.position().left + 150);
        $("#rightShade").css("width", 450 - selection.position().left);
    }
    $("#selection").mouseup(function (e) {
        move = false;
    });
});
相关文章：