Question

我想将心脏图像放在用户屏幕的中央。每次我点击它都应该调整大小并增长。

主要问题是我想要没有保证金。你能帮帮我吗？

编辑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>

Here是JSFiddle中的代码。

Answer 1

这是一个不使用margins的简单代码，它使用display:table，display:table-cell和vertical-align:middle，此解决方案的问题是您需要知道视图的高度（你总是可以通过JavaScript / jQuery获得它，但我只是为了这个例子而修复了400px）。

Here is the jsFiddle with the working example.

这是简单的HTML：

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

jQuery'click'bind :(它现在切换事件，仅用于显示目的）

$(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;
}

希望它有所帮助，如果太长则抱歉欢呼声。

居中图像并从中心调整大小。没有保证金

1 个答案: