0

我有一些 div 元素，当我单击它们时，它们会显示它们的背面（翻转卡）并扩展为 600px x 600px 的大小，我希望这些 div 在我单击它时也进入屏幕中心，然后移动当再次单击它时再次返回。我希望它水平和垂直居中。我已经尝试过搜索，但到目前为止他们都没有工作。大多数结果包括以下内容：

.flip.cover.flipped{
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    position: absolute;
    height: 600px;
    width: 600px;
    top: 50%;
}

我已将其添加到当前的 css 类.flip.cover.flipped，这是一个使用 javascript 在单击时切换的类，但这只会导致我的 div 元素保持在单击时的位置。看到这个。这是.flip.cover.flipped完整的课程：

.flip .cover.flipped {
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    position: absolute;
    height: 600px;
    width: 600px;
    top: 50%;
    transform: rotatey(-180deg);
        -moz-transform: rotatey(-180deg);
        -ms-transform: rotatey(180deg);
        -o-transform: rotatey(-180deg);
        -webkit-transform: rotatey(-180deg);
    z-index: 10;
}

其他结果包括一个我无法测试的自定义 javascript 函数。如果自定义 javascript 函数有效，我只需要一些东西来切换它（如果是这种情况，我真的希望有一些简单的东西，例如$(this).find('.cover').toggleClass('flipped');，仅用于函数）

我非常感谢任何人对我如何能够做到这一点的帮助。

我最近发现通常的方式是在其父元素中居中元素。问题是我想在窗口内而不是在其父元素内居中元素。
这是HTML结构：

<div class="flip">
    <div class="cover">
        <div class="face front">
            <img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125"/>
        </div>
        <div class="face back">
            Hello World!
        </div>
    </div>
</div>

这是切换类的javascript：

        $('.flip').click(function() {
            $(this).find('.cover').toggleClass('flipped');
        });

编辑：我正在审查我自己的一些问题，并且由于指向我的示例的链接已更改，我决定在此处显示页面的完整代码以及结果：

$('.flip').click(function() {
  $(this).find('.cover').toggleClass('flipped');
});
            /*Sorted alphabetically*/
            * {
              margin: 0px;
              padding: 0px;
            }
            #backbutton {
              background-image: url("http://farm9.staticflickr.com/8538/8781018857_feef1c4e6e_o.png");
              background-position: center;
              background-repeat: no-repeat;
              background-size: 90px 32px;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              float: left;
              min-width: 90px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            body {
              background-image: url('http://farm3.staticflickr.com/2891/8769949843_f6b2b03c89_o.png');
              background-repeat: repeat-y;
              background-position: 0px 37px;
              background-size: cover;
            }
            #creditsbutton {
              background-image: url("http://farm4.staticflickr.com/3726/8769949955_3d28f7be67_o.png");
              background-position: center;
              background-repeat: no-repeat;
              background-size: 100px 32px;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              float: right;
              min-width: 100px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            .flip {
              box-shadow: 0px 15px 6px -6px #2C0600;
              -o-box-shadow: 0px 15px 6px -6px #2C0600;
              -ms-box-shadow: 0px 15px 6px -6px #2C0600;
              -moz-box-shadow: 0px 15px 6px -6px #2C0600;
              -webkit-box-shadow: 0px 15px 6px -6px #2C0600;
              display: inline-block;
              height: 185px;
              position: relative;
              width: 125px;
              perspective: 800;
              -o-perspective: 800;
              -moz-perspective: 800;
              -ms-perspective: 800;
              -webkit-perspective: 800;
            }
            .flip .cover {
              height: 100%;
              padding: 0px 0px 0px 0px;
              position: relative;
              text-align: center;
              width: 100%;
              transform-style: preserve-3d;
              -o-transform-style: preserve-3d;
              -moz-transform-style: preserve-3d;
              -ms-transform-style: preserve-3d;
              -webkit-transform-style: preserve-3d;
              transition: 0.5s;
              -o-transition: 0.5s;
              -moz-transition: 0.5s;
              -ms-transition: 0.5s;
              -webkit-transition: 0.5s;
            }
            .flip .cover .back {
              background: white;
              color: black;
              cursor: pointer;
              transform: rotatey(-180deg);
              -moz-transform: rotatey(-180deg);
              -ms-transform: rotatey(-180deg);
              -o-transform: rotatey(-180deg);
              -webkit-transform: rotatey(-180deg);
            }
            .flip .cover.flipped {
              left: 50%;
              margin-top: -300px;
              margin-left: -300px;
              position: absolute;
              height: 600px;
              width: 600px;
              top: 50%;
              transform: rotatey(-180deg);
              -moz-transform: rotatey(-180deg);
              -ms-transform: rotatey(180deg);
              -o-transform: rotatey(-180deg);
              -webkit-transform: rotatey(-180deg);
              z-index: 10;
            }
            .flip .cover .face {
              font-family: Helvetica, Sans Serif;
              height: 100%;
              line-height: 200px;
              position: absolute;
              text-align: center;
              width: 100%;
              backface-visibility: hidden;
              -o-backface-visibility: hidden;
              -moz-backface-visibility: hidden;
              -ms-backfae-visibility: hidden;
              -webkit-backface-visibility: hidden;
            }
            .flip .cover .front {
              background: black;
              color: white;
              cursor: pointer;
              position: absolute;
            }
            #header {
              background-image: url("http://farm9.staticflickr.com/8137/8774763204_453c37e1aa_o.png");
              background-repeat: no-repeat;
              background-size: cover;
              min-width: 673px;
              padding: 4px 14px;
              z-index: 1;
            }
            .headerbuttonsegment-centre {
              background-image: url("http://farm6.staticflickr.com/5330/8787597480_6696f22a79_o.png");
              background-position: center;
              background-repeat: no-repeat;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            #headerbuttonsegment-left {
              background-image: url("http://farm9.staticflickr.com/8560/8787597614_733a58b275_o.png");
              background-position: center;
              background-repeat: no-repeat;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            #headerbuttonsegment-right {
              background-image: url("http://farm6.staticflickr.com/5466/8787597568_43fd6869fb_o.png");
              background-position: center;
              background-repeat: no-repeat;
              color: #FFFFFA;
              display: inline-block;
              font-family: Helvetica, Sans-Serif;
              font-size: 26px;
              padding: 4px 0px;
              text-align: center;
              text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
              z-index: 2;
            }
            #shelf {
              list-style-type: none;
              padding: 10px 50px 20px;
              position: relative;
            }
            .spacing {
              display: inline-block;
              width: 50px;
            }
            .wrap-centre {
              min-width: 603px;
              text-align: center;
              width: 100%
            }
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<body>
  <div id='header'>
    <a href="http://markscamilleri.tumblr.com">
      <div id="backbutton">
        &nbsp;&nbsp;Back
      </div>
    </a>
    <div class='wrap-centre'>
      <div id="headerbuttonsegment-left" style=" min-width: 150px; background-size: 150px 32px;">
        &nbsp;Bookshelf&nbsp;
      </div>
      <div class="headerbuttonsegment-centre" style=" min-width: 175px; background-size: 175px 32px;">
        Want to Read
      </div>
      <div id="headerbuttonsegment-right" style=" min-width: 150px; background-size: 150px 32px;">
        Favourites
      </div>
      <a href="#" target="_blank">
        <div id='creditsbutton'>
          Credits
          <!--Do not remove Credits!!-->
        </div>
      </a>
    </div>
  </div>
  <div id="shelf">
    <div class="flip">
      <div class="cover">
        <div class="face front">
          <img src="http://farm3.staticflickr.com/2866/8804333739_9d644bcdf6_o.jpg" width="125" />
        </div>
        <div class="face back">
          Hello World!
        </div>
      </div>
    </div>
    <div class="spacing">
    </div>
    <div class="flip">
      <div class="cover">
        <div class="face front">
          <img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125" />
        </div>
        <div class="face back">
          Hello World!
        </div>
      </div>
    </div>
  </div>
</body>

4

4 回答 4

2

您的翻转动画可能需要大量工作，但我认为我已经解决了居中问题。

工作示例

$(function () {
    $('.flip').click(function () {
        $(this).find('.cover').toggleClass('flipped');
        centered();
    });
    centered = function () {
        var wy = window.innerHeight / 2,
            wx = window.innerWidth / 2,
            py = 300,
            px = 300,
            pageTop = wy - py,
            pageLeft = wx - px;
        if ($('.cover').hasClass('flipped')) {
            $('.flipped').css({
                position: "absolute",
                top: pageTop,
                left: pageLeft
            });
        } else {
            $('.flip, .cover').removeAttr('style');
        }
    };
    $(window).resize(centered);
});
于 2013-08-06T02:48:46.913 回答
1

我不是专家，但请尝试使用 Jquery :)

创建一个.centermyboxDIV。

CSS：

.centermybox{
      position:absolute;
      left:50%;
      top:50%;
      z-index:99;
      margin: -300px 0 0 -300px;
}

查询：

$(document).ready function() {
     $(".youdivhere").toggle( function() {
         $(this).addClass(".centermybox"); 
     });
});
于 2013-07-08T12:24:08.557 回答
0

我发现了两个问题

  1. 你的 div 与 classflip有一个position:relative所以封面是绝对的 this 而不是shelf.

  2. 您的 margin-left 和 margin-top 计算不正确。您需要根据屏幕和模态大小计算这些

这是一种使用 jquery 使 div 居中的方法

这是否正常工作在很大程度上取决于 1. 以上

于 2013-07-08T12:15:43.120 回答
0

尝试将其添加到正文中

body {
  height:100%;
}

这对flipped班级（改变什么是必要的）：

position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-300px;

您可以使用 javascript/jQuery 为动作设置动画，但我假设您知道如何做到这一点。如果您不知道，请发表评论

编辑：这是一个 jsFiddle 显示它有效

在旁注中，您可能应该使用边距作为每本书（又名margin-right:50px;等）之间的间距，而不是另一个元素

编辑 2：由于您已经在使用 jQuery，您可以将 jQuery on click 函数更改为：

$('.flip').click(function() {
    var midHeight = window.innerHeight/2;
    var midWidth = window.innerWidth/2;
    $(this).find('.cover').toggleClass('flipped').css({
        "position":"absolute",
        "top":midHeight,
        "left":midWidth,
        "margin-top":"-300px",
        "margin-left":"-300px"
    });
});

用 jsFiddle来证明它也有效。但是，使用这种方法，如果您希望它保持完全居中，则必须对窗口调整大小进行相同类型的计算

$(window).resize(function() {
    var midHeight = window.innerHeight/2;
    var midWidth = window.innerWidth/2;
    $(this).find('.cover').toggleClass('flipped').css({
        "top":midHeight,
        "left":midWidth
    });
});

但这需要更多的处理

请记住，您需要在下次单击时将位置更改回原始值

编辑三：

由于您似乎没有足够的基本 jQuery 知识来正确应用我给您的内容，因此这里有一个完整的 jsfiddle。您应该能够为注释掉的行切换类名/行并且它可以工作，但如果不直接操作您的代码，可能会有一些小错误，您应该能够自己修复

至于动画过渡，我通过简单地移动一些to 来近似这个 jsFiddle 中的结果。您可以玩弄它以使其运行得更好.css.animate

如果您不确定我添加的任何内容有什么作用，或者您有一些错误在经过一段时间的工作后无法解决，包括查找类似的问题，请发表评论，我会尽力为您提供进一步帮助

于 2013-08-04T23:14:26.980 回答