javascript - jQuery 图像切片

Question

我有一个图像 slider ，我想在其中切片图像以创建某种 3D 效果。我创建了 slider ，但现在我正在为 slider 的响应行为而苦苦挣扎。 在 px 值中，一切正常，但我希望 slider 能够响应。 有人可以看看我的代码并给我一个解决问题的方法吗？ 这是我的代码:

SCSS:

    /*Variables & Helper*/
*{
    box-sizing: border-box;
}
%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

body, html{
    margin: 0;
    padding: 0;
    background: url('../img/bg.png');
}
img{
    max-width: 100%;
    height: auto;
}
.article{
    width: 80%;
    margin: 2rem auto;
    background: #fff;
    @extend %clearfix;
    padding: .8rem;
}
.img__container {
    float: left;
    width: 100%;
    margin: 0;
}
.slice{
    float: left;
}

这是 JavaScript:

$(function(){
    $( window ).on('resize',function() {
        calcDimensions();
        bgPosition();
    });
    /*Variables*/
    var $imgContainer = $('.img__container'),
        $img          = $imgContainer.children('img'),
        slices        = 5,
        percentage    = 100 / slices + '%',
        imgWidth      = $imgContainer.width(),
        imgHeight     = $imgContainer.height();

    /**/
    sliceImg();

    /*Functions*/
    function calcDimensions(){
        imgWidth   = $imgContainer.width();
        imgHeight  = $imgContainer.height();
    };
    function bgPosition(){
        for (var i = 0; i < slices; i++){
                $('#slice' + i).css({
                    'background-position' : - ( (imgWidth / slices) * i ) + 'px 0%',
                });
            };
    }
    function sliceImg(){
        var imgLink    = $img.attr('src');
            /* Delete the image */
            $img.remove();

            /*Loop*/
            /*Create new divs*/
            for (var i = 0; i < slices; i++){
                var newDiv = $('<div></div>').addClass('slice').attr('id', 'slice' + i);
                $imgContainer.append(newDiv);
            };
            /**/
            bgPosition();
            $('.slice').css({
                'background-image' : 'url(' + imgLink + ')',
                'width'            : percentage,
                'height'           : imgHeight ,
                'background-size'  : 'cover',
            });
    };  



});

所以，如果我调整窗口大小，它是响应式的。但不如真正的响应体验那么好。 我也试过类似的东西，这应该是正确的数学运算。但是在 jQuery 中我不能用 % 做数学运算，或者我错了吗？因为我总是出错....

$('.slice').css({
                'background-image' : 'url(' + imgLink + ')',
                'width'            : (imgWidth / slices / 100 * 1%) ,
                'height'           : imgHeight ,
                'background-size'  : 'cover',
            });

我期待得到解决方案。 谢谢!

最好的问候，

Answer 1

您说您使用了“px”，所以我认为如果您使用“em”而不是“px”，一切都会顺利进行。如果我错了，请纠正我，但我认为您可能希望使用 Bootstrap 进行响应式设计。