1

ユーザーの画面中央にハートの画像を配置したい。クリックするたびに、サイズを変更して拡大する必要があります。

主な問題は、マージンなしでそれをやりたいということです。助けてください。

編集 1 - これまでのところ、これは私のコードですが、本当に面倒で、マージンを使用しています

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<style>
#container {
  width: 100px;
  height: 100px;

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

#Msg1 {
  width: 200px;
  height: 100px;
 display:none;
 position:absolute;

  margin-right:55%;
  margin-top: 45%;
}
body {
    overflow:hidden;
    background-color:#ffd6d6;
}

</style>
<script>
var size=100;
var i=0;
var heartImage = document.getElementById('container');
$(document).ready(function(){
   $(function() {
  $("#Msg1").fadeIn("slow");
  });
 $(function() {
    $("#container")
        .mouseover(function() { 
        if(i==0){
            var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
            $(this).animation
            $(this).attr("src", src);}
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("over.png", ".png");
            $(this).attr("src", src);
        });
});
  $("#container").click(function(){
  i++;
  if(i==1)
  {
  $("#Msg1").fadeOut("fast");
  }
  if(i==6)
  {
  $("body").css("background-color","#9d1b1b");
   $("#container").hide();
  }
  size=size*2;
   $("#container").animate({
      height:size,
      width:size,
      margin:-size/2,  
    });
  });

});

</script>
</head>

<body dir="rtl">
<img id="container" src="heart.png" alt="null"/>
<div  id="Msg1">
</div>

</body>

JSFiddleのコードを次に示します。

4

1 に答える 1

0

これは単純なコードで、 、およびmarginsを使用します。このソリューションの問題は、ビューの高さを知る必要があることです (JavaScript/jQuery を介していつでも取得できますが、私は 400px に修正しました。例）。display:tabledisplay:table-cellvertical-align:middle

動作例を含む jsFiddle を次に示します。

これは単純な HTML です。

<div class="content">
    <div class="wrapper">
        <div class="inner">
            <div class="heart"></div> 
        </div>
    </div
</div>

jQuery の「クリック」バインド: (目的を示すためだけに、イベントをトグルします)

$(document).ready(function(e) {
    $(".heart").click(function () {
       $(this).toggleClass("bigger");
    })
});

そして CSS (ここでは CSS3 トランジションを (ベンダー プレフィックス付きで) 使用しますが、jQuery を介してアニメーション化してクロスブラウザーにすることができます)

body{
    height:400px;
}
.content{
    display:table;
    height:100%;
    width:100%;
}
.wrapper{
    display:table-cell;
    vertical-align:middle;
    height:100%;
}
.inner{
    text-align:center
}
.heart{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;

    display:inline-block;
    background: transparent url('http://wbom.files.wordpress.com/2012/02/red-heart.png') center center no-repeat;
    background-size: 250px;
    width:250px;
    height:250px;
}
.bigger{
     background-size: 350px;
    width:350px;
    height:350px;
}

お役に立てば幸いです。長すぎる場合は申し訳ありません。
乾杯。

于 2013-02-26T14:45:09.180 に答える