9

私のページには一連のdivがあります。各divには背景画像があり、グリッド状に配置されています。私のページには任意の数のdivがあります。ページはを使用してサイズに制限されます<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

divをクリックして、特定のスケールに拡大縮小し、中央に配置できるようにしたい。

私のマークアップ：

<body id="body">
    <div id="container" style="position: relative">
        <div id="pack1" class="screenItem cardPack"></div>
        <div id="pack2" class="screenItem cardPack"></div>
        <div id="pack3" class="screenItem cardPack"></div>
        <div id="pack4" class="screenItem cardPack"></div>
    </div>
</body>

私のcss：

#pack1{
    margin-left: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(../images/image1.png);
    background-size: 100% 100%;
    float: left;
    clear: both;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;     
    transition: all 1s ease-in-out;
}

#pack2{
    margin-right: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(../images/image2.png);
    background-size: 100% 100%;
    float: right;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;     
    transition: all 1s ease-in-out;
}

#pack3{
    margin-left: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(../images/image3.png);
    background-size: 100% 100%;
    float: left;
    clear: both;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;     
    transition: all 1s ease-in-out;
}

#pack4{
    margin-right: 20px;
    margin-top: 20px;
    height: 193px;
    width: 127px;
    background-image: url(../images/comingSoon.png);
    background-size: 100% 100%;
    float: right;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;     
    transition: all 1s ease-in-out;
}
#body,
.ui-page {
background-image: url(../images/bg.png);
background-size: auto 100%;
background-repeat: repeat-x;
}

#container {
margin: auto;
width: 310px;
height: 568px;
}

私はほとんど機能するファッジを持っています：

$(cardPack).click(function() {
    var left = $(cardPack).position().left;
    var top = $(cardPack).position().top;
    $(cardPack).css("-webkit-transform", "scale(2.5,2.5)");
    $(cardPack).css("-webkit-transform-origin", (3*(left/4)) + " " + (3*(top/4)));
});

しかし、それは偶然と幸運のようなものだと思います。transform-origin私の脳は、開始点に関係なく、画像が画面の中央に表示されるように設定する場所を特定できるところまで機能していません。

transform-originこれを実現するための代替案を検討できることをうれしく思います。

編集：「ローカルで行うのとまったく同じように動作しない」jsfiddle：http: //jsfiddle.net/a7Cks/9/

4

2 に答える 2

6

楽しみのために、css3について話しているので、target:selectiors http://codepen.io/dmi3y/full/keAdsを使用した純粋なcssソリューションがあり、初期データから少しクリーンアップされています

HTML

  <div id="container">
    <a href="#pack1" id="pack1" class="screenItem cardPack"></a>
    <a href="#pack2" id="pack2" class="screenItem cardPack"></a>
    <a href="#pack3" id="pack3" class="screenItem cardPack"></a>
    <a href="#pack4" id="pack4" class="screenItem cardPack"></a>
  </div>

以下

#pack1{
    margin-left: 20px;
    margin-top: 20px;
    float: left;
    clear: both;

    &:target {
      top: 105px; left: 75px;
      margin-left: 0;
      margin-top: 0;
    }
}

#pack2{
    margin-right: 20px;
    margin-top: 20px;
    float: right;

    &:target {
      top: 105px; left: -75px;
      margin-right: 0;
      margin-top: 0;
    }
}

#pack3{
    margin-left: 20px;
    margin-top: 20px;
    float: left;
    clear: both;

    &:target {
      top: -105px; left: 75px;
      margin-left: 0;
      margin-top: 0;
    }
}

#pack4{
    margin-right: 20px;
    margin-top: 20px;
    float: right;

    &:target {
      top: -105px; left: -75px;
      margin-right: 0;
      margin-top: 0;
    }
}

#container {
  position: relative;
  margin: auto;
  width: 310px;
  height: 568px;
}

.screenItem {
  background: green;
  position: relative;
  height: 193px;
  width: 127px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;     
  transition: all 1s ease-in-out;
}

:target {
  background: red;
  z-index: 100;
  padding: 10px; // + 20 px dimensions
}
于 2012-12-13T21:51:20.793 に答える
3

どうぞよろしくお願いします。

アニメーションの実行中にクリックし続けると、再び移動するというバグがあります。しかし、これはそれを行うための良い方法だと思います。

アニメーションの使用：

      $(cardPack).animate({
            width: '50%',
            height: '50%',

        }, 700, function() {
            $(cardPack).animate({
                left: (contwidth - width * 1.5) / 2,
                top: (contheight - (height+height/2) * 1.5) / 2
            }, 300);
        });

http://jsfiddle.net/a7Cks/11/

height/2オブジェクトの上部ではなく、オブジェクトの中央に配置するために追加されました。

もう1つのポイントは、position：absoluteを使用して要素を配置できるようにすることです。cssのposition：staticは冗長です。

于 2012-12-07T17:06:02.320 に答える