Question

我正在为我的公司做一个网络项目，我遇到了麻烦。我有这样的代码：

//CSS
.home-panel{
   z-index: 0;
   width: 1800px;
   height: 2100px;
   background: gray;
   transform: skew(0deg,-55deg) translateY(-1920px);
}
.ultimate-hero{
   height:100vh;
   overflow:hidden;
}


  //HTML
  <div class="ultimate-hero">
    <div class="home-panel">
    </div>
  </div>


 //JS
 $(window).resize(function() {
    //get dimensions
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });
  });

我希望在浏览器调整大小时移动.home-panel，但该代码显然与我的预期相反。那么我该如何解决这个问题？

谢谢。

我之前应该提到这一点，我希望来自这个网站http://espn.com/espn/feature/story/_/id/19742921/espn-body-issue-2017的.home-panel或者至少更接近{{1}}。如果你有更好的方法，请帮助我。

Answer 1

.home-panel{
   z-index: 0;
   width: 1800px;
   height: 2100px;
   background: gray;
   /*transform: skew(0deg,-55deg) translateY(-1920px);*/
}

尝试删除transform: skew(0deg,-55deg) translateY(-1920px);

 //JS
 $(document).ready(function(){
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });

 });

 $(window).resize(function() {
    //get dimensions
    var height = $(window).height();
    var width = $(window).width();
    $('.home-panel').css({
   'transform' : 'skew(0deg,-55deg) translateY(-'+width+'px)'
     });
  });

Answer 2

试试这个：

$('.home-panel').css({
    'transform': 'skew(0deg,-55deg) translateY(-'+(1920+1800- width)+'px)'
});

使用jquery onresize更改div的位置

2 个答案: