Question

我的问题：我不能围绕这个设置的行为。当我放大时，图像往往移动得更快，但是当我缩小时，它们根本不会移动。有时他们只是停在9.xxxxxx，即使我告诉他们只移动一个像素。你能解释一下吗？

我的浏览器是Chrome。

我的目标：实现流畅的动作，当超出父元素的范围时，图像会消失，无论放大百分比如何。

我正在寻找管理这些奇怪过程的基本规则，我希望从中学习新事物。

守则：

HTML ：

<div id = "presentation">
            <ul>
                <li class = "pres-item"> <img class = "pres-image" src = "../img/presentation/image1.jpg"> </li>
                <li class = "pres-item"> <img class = "pres-image" src = "../img/presentation/image2.jpg"> </li>
                <li class = "pres-item"> <img class = "pres-image" src = "../img/presentation/image3.jpg"> </li>
                <li class = "pres-item"> <img class = "pres-image" src = "../img/presentation/image4.jpg"> </li>
            </ul>
        </div>

CSS ：

html, body {
    margin: 0;
}

#presentation {
    padding: 10px;
    width: 900px;
    margin: 50px auto;
    overflow: hidden;
}

#presentation ul {
    list-style-type: none;
    margin: 0;
}

#presentation ul li {
    display: inline-block;
}

.pres-item {
    height: 150px;
    width: auto;
    position: relative;
    left: 0;
}
.pres-image {
    width: inherit;
    height: inherit;
}

JS （使用jQuery）：

$(document).ready(function(){
    var presentation = $('#presentation');
    var interval = setInterval(function() {
        console.log('intervaling');
        $('.pres-item').css('left', '+=1');
    }, 60);

});

图片：

The fixed position at 90% zoom

谢谢：

感谢人们（提前）

Answer 1

<script>

    // too much code, but it explains..

    // do this in ur interval...

    var getCurrent_left = $('.pres-item').css('left');
    var newCurrent_left = getCurrent_left.split['px'];
    var newCurrent_left = parseInt(newCurrent_left[0]) + 1;
    var newCurrent_left = parseInt(newCurrent_left);

    $('.pres-item').css({"left", newCurrent_left});

    // you can use parseFloat(var, 2) for decimal


</script>

Answer 2

我的问题：

当我放大时，图像往往移动得更快，但是当我缩小时，它们根本不会移动。

我不确定这实际上是个问题。它们在缩小时似乎移动得更慢，因为它们为每个视口像素传输的屏幕像素更少。

有时他们只是停在9.xxxxxx，即使我告诉他们只移动一个像素。你能解释一下吗？

显然，Chrome并不总是将CSS属性作为整数返回。您可以在此代码中看到相同的效果：

var presentation = document.getElementById('presentation');
var items = presentation.getElementsByClassName('pres-item');
var interval = setInterval(function () {
    [].forEach.call(items, function (x) {
        var lastLeft = getComputedStyle(x, null).getPropertyValue('left');        
        console.log(lastLeft);
        x.style.left = (parseFloat(lastLeft) + 1) + 'px';
    })
}, 60);

我不确定这是不是问题。您可以通过在单独的变量中跟踪偏移并在循环期间递增它而不是从元素的当前样式计算它来轻松避免它。

var presentation = $('#presentation');
var left = 0;
var interval = setInterval(function() {
    ++left;
    $('.pres-item').css('left', left + 'px');
}, 60);

缩放时“位置：相对”的奇怪行为。发生了什么？

2 个答案: