javascript - 响应标题宽度两个重叠图像

Question

我正在创建一个包含两个重叠图像的响应式标题。根据当前鼠标位置，div 可以变大或变小。问题是创建此 header 响应。两个图像的中心应该在网页的中心。这很难实现，因为包含图像的 div 不在文档的中心。你可以看到我目前的进度here .只要浏览器在 1200 像素左右，它看起来就不错(图像宽度为 1280 像素)。但是，当我将浏览器的大小调整为更小的尺寸时，效果并不是预期的那样。

HTML

<div class="header">
<div class="headerleft"><img src="images/rick.png" width="1280" height="200" id="rick" alt="rick" align="middle"></div>
<div class="headerright"><img src="images/peter.png" width="1280" height="200" id="peter" alt="peter" align="right"></div>
</div>

CSS

    .header{
        height: 200px;
        width: 100%;
        background-size: 50%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .headerleft{
        background-color: red;
        width: 100%;
        height: 100%;
        float: left;
        margin: 0;
        padding: 0;
        overflow:hidden;
        background-image: url('images/rick.png');
        background-position: left;
    }

    .headerright{
        background-color: blue;
        width: 50%;
        height: 100%;
        float: right;
        margin: 0;
        padding: 0;
        overflow:hidden;
        /*background-image: url('images/peter.png');*/
        background-position: right;
    }

Javascript

$(document).on('mousemove', function(e){
    page = $( document ).width();
    pagecrop = page/2;  
    $('.headerright').css({
       width:  e.pageX/2+pagecrop/2,
    });
    });

    $(document).on('mousemove', function(e){
    page = $( document ).width();
    pagecrop = page/2;
    $('.headerleft').css({
       width:  pagecrop-e.pageX/2+pagecrop/2,
    });
    });

Answer 1

让它与 CSS transform translate 属性一起使用，并使用 jquery 更改该值。谢谢你 docodemore!

$(document).ready(function() { 
    var $winwidth = $(window).width();
    var width2 = 1280-$winwidth
    var width3 = width2/2
        $('#peter').css('transform', 'translate(' + width3  + 'px)');
        $('#rick').css('transform', 'translate(-' + width3  + 'px)');
    $(window).bind("resize", function(){ 
        var $winwidth = $(window).width();
        var width2 = 1280-$winwidth
        var width3 = width2/2
            $('#peter').css('transform', 'translate(' + width3 + 'px)');
            $('#rick').css('transform', 'translate(-' + width3  + 'px)');
    });
});