为了账号安全,请及时绑定邮箱和手机立即绑定

如何在js中onclick将div置于前面,调整大小并将其居中到屏幕中间?

如何在js中onclick将div置于前面,调整大小并将其居中到屏幕中间?

绝地无双 2023-08-24 10:15:30
请耐心等待,我很难对此给出一个好的解释。所以我想制作一个信息页面,其中有几个 div 来显示它所包含的信息的一些预览。像这样: 标准视图当访问者单击其中一个 div 时,它会翻转、增大大小并居中于所有其他 div 之上,而不会影响它们。像这样:当点击一个 div 时到目前为止,我已经完成了网格结构和翻转,但是一旦我开始摆弄 div 的尺寸,所有东西都会移动:https://jsfiddle.net/xdqwL807/    $(document).on("click", ".flip-container", function () {        $(this).toggleClass('hover');        $('.front').removeClass('front');        $(this).toggleClass('zIndex')    });.flip-container {  perspective: 1000px;}.flip-container.hover .flipper {  transform: rotateY(180deg);}.bringToFront {    width: 500px !important;    height: 500px !important;    align-content: center !important;    z-index: 1000 !important;}.flip-container,.front,.back {    display: inline-flex;  width: 320px;  height: 480px;}.flipper {  transition: 0.6s;  transform-style: preserve-3d;  position: relative;}.front,.back {  backface-visibility: hidden;  position: absolute;  top: 0;  left: 0;}.front {  z-index: 2;  transform: rotateY(0deg);}.back {  transform: rotateY(180deg);}.green {  width: 320px;  height: 480px;  background-color: green;}.blue {    background-color: blue;  width: 320px;  height: 480px;}<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script></head><body>    <div style="display: flexbox; align-content: center; width: 100%; position:absolute"></div>    <div class="flip-container">        <div class="flipper">            <div class="front">                <!-- front content -->                <div class="green">                </div>            </div>            <div class="back">                <!-- back content -->                <div class="blue">
查看完整描述

2 回答

?
Qyouu

TA贡献1786条经验 获得超11个赞

您需要使用 CSS 位置来实现所需的结果。以下是我对您的代码所做的修改:


.card-holder为每个添加一个包装器.flip-container,这对于避免元素移动非常重要,因为.flip-container位置固定,因此其他元素不会移动,因为.card-holder将在那里避免移动。


<div class="card-holder">

  <div class="flip-container">

    <div class="flipper">

      <div class="front">

        <!-- front content -->

        <div class="green">

        </div>

      </div>

      <div class="back">

        <!-- back content -->

        <div class="blue">

        </div>

      </div>

    </div>

  </div>

</div>

将此 CSS 添加到.card-holder


.card-holder {

  width: 320px;

  height: 480px;

  display: inline-flex;

}

并从中删除了以下内容.flip-container, .front, .back


.flip-container, .front, .back {

  width: 320px;

  height: 480px;

}

在 CSS 中添加了以下动画,在焦点动画上,卡片将被固定,并且大小为 2 倍,在模糊时,卡片将处于初始状态。


.focus {

  animation: focus 0.4s ease-in-out forwards;

}


.blur {

  animation: blur 0.4s ease-in-out forwards;

}


@keyframes focus {

  to {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(2);

    z-index: 5;

  }

}


@keyframes blur {

  from {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(2);

    z-index: 5;

  }

}

  to {

    position: relative;

    top: initial;

    left: initial;

    transform: translate(0%, 0%) scale(1);

    z-index: 0;

  }

}

这是我添加的 jquery 代码:


if((!$(this).hasClass('focus') && !$(this).hasClass('blur')) || $(this).hasClass('blur')) {  

  // add focus and remove blur class for initial state as well as if blur class is available

  $(this).addClass('focus');

  $(this).removeClass('blur');

}

else if ($(this).hasClass('focus')) {

  // add blur and remove focus class if focus class is available

  $(this).addClass('blur');

  $(this).removeClass('focus');

}

// to stop event propagation to other elements

event.stopPropagation()

查看实际效果:https://jsfiddle.net/8jh4pwut/15/


    $(document).on("click", ".flip-container", function (event) {

        $(this).toggleClass('hover');

        

        $('.front').removeClass('front');

        $(this).toggleClass('zIndex');

        if((!$(this).hasClass('focus') && !$(this).hasClass('blur')) || $(this).hasClass('blur')) {        

            $(this).addClass('focus');

            $(this).removeClass('blur');

        }

        else if ($(this).hasClass('focus')) {

            $(this).addClass('blur');

            $(this).removeClass('focus');

        }

        event.stopPropagation()

    });

.flip-container {

  perspective: 1000px;

}

.flip-container.hover .flipper {

  transform: rotateY(180deg);

}


body {

  margin: 0;

}


.bringToFront {

    width: 500px !important;

    height: 500px !important;

    align-content: center !important;

    z-index: 1000 !important;

}


.card-holder {

  width: 320px;

  height: 480px;

  display: inline-flex;

}


.flip-container,

.front,

.back {

    display: inline-flex;

}

.flipper {

  transition: 0.6s;

  transform-style: preserve-3d;

  position: relative;

}

.front,

.back {

  backface-visibility: hidden;

  position: absolute;

  top: 0;

  left: 0;

}

.front {

  z-index: 2;

  transform: rotateY(0deg);

}

.back {

  transform: rotateY(180deg);


}


.green {

  width: 320px;

  height: 480px;

  background-color: green;

}


.blue {

    background-color: blue;

  width: 320px;

  height: 480px;

}


.focus {

  animation: focus 0.4s ease-in-out forwards;

}


.blur {

  animation: blur 0.4s ease-in-out forwards;

}


@keyframes focus {

  to {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(2);

    z-index: 5;

  }

}


@keyframes blur {

  from {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(2);

    z-index: 5;

  }

}

  to {

    position: relative;

    top: initial;

    left: initial;

    transform: translate(0%, 0%) scale(1);

    z-index: 0;

  }

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>


</head>

<body>

<div class="overlay">


</div>

    <div style="display: flexbox; align-content: center; width: 100%; position:absolute"></div>

    <div class="card-holder">

      <div class="flip-container">

          <div class="flipper">

              <div class="front">

                  <!-- front content -->

                  <div class="green">


                  </div>

              </div>

              <div class="back">

                  <!-- back content -->

                  <div class="blue">


                  </div>

              </div>

          </div>

      </div>

    </div>

    <div class="card-holder">

      <div class="flip-container">

          <div class="flipper">

              <div class="front">

                  <!-- front content -->

                  <div class="green">


                  </div>

              </div>

              <div class="back">

                  <!-- back content -->

                  <div class="blue">


                  </div>

              </div>

          </div>

      </div>

    </div>

</body>    

<script>

</script>

</html>


查看完整回答
反对 回复 2023-08-24
?
白衣染霜花

TA贡献1796条经验 获得超10个赞

最好、最简单的方法是使用 JavaScript。解释位于代码片段下方。


function hello() {

    document.getElementById('div').classList.add('anim'); 

    setTimeout(function(){

        document.getElementById('div').classList.remove('anim');

    }, 1000); 

}

#div{

    height: 100px;

    width: 100px;

    background-color: yellow;

}

.anim {

    animation: anim 1s;

}

@keyframes anim {

  to {

    background-color: red;

  }

}

<div id="div" onclick="hello()"></div>

现在,在CSS中,我们创建了带有一些样式的 div,并且创建了带有动画样式的单独的 class。然后像往常一样,我们将关键帧规则添加到动画中。

然后在我们的JS中,我们有一个函数将该类添加到我们的 div 中。然后我们设置一个超时函数,它的时间指定为动画的长度(以毫秒为单位),这将从 div 中删除动画类。

然后在HTML中,我们指定hello()function 作为onclickdiv 的属性。就是这样。

查看完整回答
反对 回复 2023-08-24
  • 2 回答
  • 0 关注
  • 100 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信