javascript - 如何使用 JQuery 和 Translate 在屏幕中动态居中 div

标签 javascript jquery html css

我遇到以下问题:我希望 tariffCard > div 在单击时位于屏幕中央。我需要居中动画。因此，我决定不通过使用 JQuery 更改左/顶部位置来执行此操作，因为这会使动画变得粗糙。

因此我选择遵循以下策略:

  • 计算需要在 X 轴和 Y 轴上移动元素多少像素才能使其居中；
    var leftPos = $(this).offset().left;
    var topPos = $(this).offset().top;
    var cardWidth = $(this).width();
    var cardHeight = $(this).height();
    var docWidth = $(document).width();  
    var docHeight = $(document).height();  
    var main = $(this);

    var moveRight = (docWidth - cardWidth)/2 - leftPos;
    var moveTop = (docHeight - cardHeight)/2 - topPos;
  • 使用 JQuery 改变 css 转换
    $('.selected').css({"transform": "translateX(-" + moveRight + ") translateY(-" + moveTop + ") !important"});

以下问题困扰着我:

  • 出于某种原因，此像素计算似乎不正确。反变换后卡片向右偏移。

  • 我找不到使第二段代码正常工作的方法(更改 css 转换的代码)。因此，我不得不手动测试上述像素计算。

这是完整的代码:

$(document).ready(function(){
  $('.tariffCards > div').click(function(){
    var leftPos = $(this).offset().left;
    var topPos = $(this).offset().top;
    var cardWidth = $(this).width();
    var cardHeight = $(this).height();
    var docWidth = $(document).width();  
    var docHeight = $(document).height();  
    var main = $(this);
   
    var moveRight = (docWidth - cardWidth)/2 - leftPos;
    var moveTop = (docHeight - cardHeight)/2 - topPos;
    // console.log(cardWidth)
    // console.log(cardHeight)
    // console.log(leftPos)
    // console.log(moveRight)


    // Cria o Overlay
    $("body").append("<div id='overlay'></div>");

    $("#overlay")
      .height(docHeight)
      .css({
         'backdrop-filter': 'blur(3px)',
         'background-color': 'rgba(0,0,0,0.4)',
         'left': 0,
         'position': 'absolute',
         'top': 0,
         'width': '100%',
         'z-index': 1
      }).fadeIn('3000', function(){
          $('#overlay').show();
      });
    // transform: rotateY(-180deg) translateX(-90%) !important;
    // console.log("")
    // Some com o scroll
    $('body').css('overflow-y', 'hidden');
    // Some com os outros Cards
    $(main).siblings().css("opacity", 0);
    
    // Gira e centraliza o Card @Rever centralização
    setTimeout(function() {
      main.toggleClass('not-selected');
      main.find('h3').css("opacity", 0);
      main.find('span').css("opacity", 0);
      main.toggleClass('selected');
      // Ainda tenho que pensar como centralizar isso de um modo responsivo
      $('.selected').css({"transform": "rotateY(-180deg) translateX(-100%) !important"});
             
      $('.form-report').click(function(e) {
          e.stopPropagation();
      });
      
      $('#name-input').focus();
    }, 200);  

    setTimeout(function(){
     // Organiza o form dentro do Card
      $('.selected .form-report').css({
          "display":"inherit",
          "opacity": 1,
          "transform":"scaleX(-1)"
      });
    }, 600);
  });
});
	
	// Ao clicar no Overlay
	jQuery('body').on('click', '#overlay', function(){

    var main = $('.selected');

    $('.form-report').fadeOut('300', function(){
      $(this).hide();
    });

    $('#overlay').fadeOut('300',function(){
    $('#overlay').hide();
    });

    main.toggleClass('selected');
    // $('.tariffCards > div')
    // .css({"transform":'rotateX(45deg) rotateY(-15deg) rotate(45deg)', "height":"180px"
    // });

    setTimeout(function() {
      main.toggleClass('not-selected');
      $('.tariffCards > div').siblings().css("opacity", 1);
      $('.tariffCards > div h3').css("opacity", 1);
      $('.tariffCards > div span').css("opacity", 1);
    }, 900);    

    // Reaparece com o scroll
    $('body').css('overflow-y', 'scroll')
    
    
	});
.tariffCards {
  left: 25%;
  position: absolute;
  top: 100%;
  transform-style: preserve-3d;
  z-index: 2;
}

.tariffCards > div {
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  height: 180px;
  margin-top: -70px;
  overflow: hidden;
  position: relative;
  transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
  transition: all .9s ease-in-out;
  width: 330px;
}

.tariffCards > div h3 {
  bottom: 30%;
  font-size: 18px;
  font-weight: 800;
  left: 20%;
  position: relative;
  transform: rotate(-90deg);
}

.tariffCards > div span {
  font-size: 12px;
  font-weight: 700;
  left: 35%;
  opacity: .8;
  position: absolute;
  top: -6%;
  transform: rotate(-90deg);
  width: 100%;
}
.tariffCards > .lren {
  background-color: #8063e1;
  background-image: linear-gradient(135deg, #bd7be8, #8063e1);
  box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #8063e1;
}
.tariffCards > div.movi {
  background-color: #3f58e3;
  background-image: linear-gradient(135deg, #7f94fc, #3f58e3);
  box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #3f58e3;
}
.tariffCards > div.flry {
  background-color: #2c6fd1;
  background-image: linear-gradient(135deg, #21bbfe, #2c6fd1);
  box-shadow: 20px 20px 60px rgba(34,50,84,0.5), 1px 1px 0px 1px #2c6fd1;
}
.tariffCards > div.pard {
  background-color: #352f64;
  background-image: linear-gradient(135deg, #415197, #352f64);
  box-shadow: 5px 5px 60px rgba(34,50,84,0.9), 1px 1px 0px 1px #352f64;
}

.not-selected{
  transition: all .4s ease !important;
  /*z-index: -1 !important;*/
}

.not-selected:hover {
  transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px) !important;
}

.selected {
  height: 55vh !important;
  transform: rotateY(-180deg) translateX(-280px) !important;
  z-index: 3 !important;
}

/*Formulário de inscrição*/
.form-report{
    display: none;
    margin: 0 auto;
    opacity: 0;
    text-align: center;
    transition: all 2s;
    width: 80%;
}

.form-report form{
    margin-top: 10%;
    margin-bottom: 5%;
}
.form-report form input{
    color: black;
    width:100%;
}

.container-btn a{
    background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%);
    border:none;
    border-radius: 100px;
    box-shadow:0px 10px 10px rgba(0,0,0,0.2);;
    color: #fff;
    display: inline-block;
    font-size: 1.3em;
    padding: 4% 0;
    transition: all .2s;
    width: 70%;
}

.container-btn a:hover{
    transform: translateY(3px);
}
<!DOCTYPE html>
<html>
<head>
    <title>HomePage</title>
    <link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <div class="tariffCards">
        <div class="lren not-selected">
            <h3>Lojas Renner<br><br>$LREN3</h3>
            <span>Atualizado em 2T19</span>
            <!--Form aberto ao clicar no relatório-->
            <div class='form-report'>
                <h2>Receba agora.</h2>
                <form>
                    <input type="text" id='name-input' placeholder="Nome">
                    <br/>
                    <input type="text" placeholder="Seu Email">
                    <br/>
                    <input type="text" placeholder="Celular (SMS de Confirmação)">
                </form>
                
                <br/>

                <div class='container-btn'>
                    <a href="#"><img src='http://edufinance.com.br/wp-content/uploads/2019/08/noun_down-arrow.png' width='12%'>
                    </a>
                </div>
            </div>
        </div>
        <div class="movi not-selected" id='movi3'>
            <h3>Movida<br><br>$MOVI3</h3>
            <span>Atualizado em 2T19</span>
            <!--Form aberto ao clicar no relatório-->
            <div class='form-report'>
                <h2>Receba agora.</h2>
                <form>
                    <input type="text" id='name-input' placeholder="Nome">
                    <br/>
                    <input type="text" placeholder="Seu Email">
                    <br/>
                    <input type="text" placeholder="Celular (SMS de Confirmação)">
                </form>
                
                <br/>

                <div class='container-btn'>
                    <a href="#"><img src='http://edufinance.com.br/wp-content/uploads/2019/08/noun_down-arrow.png' width='12%'>
                    </a>
                </div>
            </div>
        </div>
        <div class="flry not-selected" id='flry3'>
            <h3>Fleury S.A.<br><br>$FLRY3</h3>
            <span>Atualizado em 2T19</span>
            <!--Form aberto ao clicar no relatório-->
            <div class='form-report'>
                <h2>Receba agora.</h2>
                <form>
                    <input type="text" id='name-input' placeholder="Nome">
                    <br/>
                    <input type="text" placeholder="Seu Email">
                    <br/>
                    <input type="text" placeholder="Celular (SMS de Confirmação)">
                </form>
                
                <br/>

                <div class='container-btn'>
                    <a href="#"><img src='http://edufinance.com.br/wp-content/uploads/2019/08/noun_down-arrow.png' width='12%'>
                    </a>
                </div>
            </div>
        </div>
        <div class="pard not-selected" id='pard3'>
            <h3>Hermes Pardini<br><br>$PARD3</h3>
            <span>Atualizado em 2T19</span>
            <!--Form aberto ao clicar no relatório-->
            <div class='form-report'>
                <h2>Receba agora.</h2>
                <form>
                    <input type="text" id='name-input' placeholder="Nome">
                    <br/>
                    <input type="text" placeholder="Seu Email">
                    <br/>
                    <input type="text" placeholder="Celular (SMS de Confirmação)">
                </form>
                
                <br/>

                <div class='container-btn'>
                    <a href="#"><img src='http://edufinance.com.br/wp-content/uploads/2019/08/noun_down-arrow.png' width='12%'>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src='home.js'></script>
</body>

最佳答案

如果您对 CSS 没有任何问题，请使用 CSS 在中心对齐内容。

为什么不是 JavaScript/Jquery:自定义 javascript/jquery 逻辑会导致性能问题，因为当我们对齐时HTML DOM 中的一些元素，然后删除元素并在指定位置呈现。

所以，我认为在页面中呈现后证明 div 不是一个好主意。

为什么使用 CSS:当对象即将呈现时，浏览器 将决定在页面中放置元素的位置，因此使用 CSS 我们保存多次呈现页面中的元素。

所以这可能有帮助

div {
    display: flex;
    justify-content: center;
}

关于javascript - 如何使用 JQuery 和 Translate 在屏幕中动态居中 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57759772/

上一篇：javascript - 如何将第一页的所选日期选择器值显示到第二页日期选择器

下一篇：html - 如何删除图像周围不需要的白色边框？

相关文章：

javascript - 如何使用ajax将新页面加载到div

javascript - 如果子元素名称与 location.hash 匹配，则突出显示 div

html - 如何使用 flexbox 使部分响应？没有框架

javascript - 展开多个 div 以适应屏幕的水平宽度

javascript - 有没有办法让JS提示返回一个数字？

javascript - 从嵌套函数返回 getJSON 结果

javascript - jQueryrotate if else 循环问题

javascript - 如何从自动完成位置文本字段捕获 angularjs 范围内的数据

javascript - 使每条 Canvas 线都可拖放

html - 围绕图片angularjs对齐 block

©2024 IT工具网  联系我们