Question

我正在将图像从准确的中心设置为左上角的特定位置。要做到这一点，我需要使用绝对定位。但是，在以下情况下，它不会以中心开始。解决这个问题的方法是使位置相对，但动画不起作用。如果我执行 left：35％之类的操作，它只会在我的屏幕上居中。我该如何解决这个问题？

<style>
#Intro {
position: relative;
height:100%;
width:100%;
text-align:center;
}

#Picture {
position: absolute;
top: 30%;
}
</style>

<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>

<script  type="text/javascript">
    $(window).ready(function() {
    var pos = $('#Picture').position();
    $('#Picture').css({
        top: pos.top + 'px',
        left: pos.left + 'px'
    }).fadeIn(1000).delay(1500).animate({
        'top': '25px',
        'left': '20px',
        'height': '101px'
    }, 2000, 'swing');
});
</script>

<META HTTP-EQUIV=Refresh CONTENT="4.5; URL=home.html">
    <link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Intro">
<img src="images/Triplid Logo.png" id="Picture"/>
</div>

Answer 1

如果您希望最初隐藏图像，请在窗口的绝对中心淡入，然后缩小到左上角，然后以下内容将会这样做。

请注意设置图像初始位置的简单公式，以及使用display: none;初始隐藏图像。

CSS：

#Intro {
    position: relative;
    height:100%;
    width:100%;
    text-align:center;
}

#Picture {
    position: absolute;
    display: none;
}

使用Javascript：

$(window).ready(function() {
    var $img = $('#Picture');
    $img.css({
        left: ($(window).width() - $img.width()) / 2,
        top: ($(window).height() - $img.height()) / 2
    }).fadeIn(1000).delay(1500).animate({
        'top': '25px',
        'left': '20px',
        'height': '101px'
    }, 2000, 'swing');
});

jsFiddle证明：http://jsfiddle.net/greglockwood/67Z6K/1/

如何以这种情况完美地启动此图像？

1 个答案: