Question

我有一个图像滑块，我想在其中切割图像以创建某种3D-Effekt。我创建了滑块，但现在我正在努力应对滑块的响应行为。在px值中，一切都工作正常，但我希望滑块能够响应。有人可以看看我的代码并给我一个解决问题的解决方案吗？这是我的代码：

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'，我认为一切都会顺利。并纠正我如果我错了，但我认为您可能想使用Dootstrap进行响应式设计。

jQuery图像切片

1 个答案: