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它的简单代码display:table，display:table-cell并且vertical-align:middle，此解决方案的问题是您需要知道视图的高度（您始终可以通过 JavaScript/jQuery 获取它，但我将其固定为 400px 只是为了例子）。

这是带有工作示例的 jsFiddle。

这是简单的 HTML：

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

jQuery 'click' 绑定：（它现在切换事件，只是为了显示目的）

$(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 回答