Question

我正在创建一个包含两个重叠图像的响应式标题。根据当前鼠标位置，div可以更大或更小。问题是创建此标头响应。两个图像的中心应位于网页的中心。这很难实现，因为包含图像的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转换翻译属性，并使用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)');
    });
});

Answer 2

您是否尝试删除HTML中图像的固定像素大小并替换为CSS或将1280px值更改为100％：

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

不确定这是否是您想要的效果，但也许值得一试？

响应标头宽度两个重叠图像

2 个答案: