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

我将图像从确切的中心动画到左上角的特定位置。要做到这一点，我需要使用绝对定位。但是，在以下情况下，它并不以中心为开始。解决这个问题的方法是让位置相对，但动画不起作用。如果我做了类似左侧：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>

来源

2011-11-11 Matt

这对我的作品。 http://jsfiddle.net/UqMPC/ –

这很奇怪......那不是发生了什么。对我来说，它从顶部开始30％，它的左边距位于中心，而不是图像的中心。 – Matt

http://jsfiddle.net/UqMPC/1/正如您所看到的，图像开始于中心的右侧 – Matt

如果你想要的形象最初隐藏，在窗口的绝对中心淡入，然后收缩到左上角，那么下面将这样做。

注意简单的公式来设置图像的初始位置，以及利用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/

来源

2011-11-11 05:07:04 GregL

谢谢！有什么办法让我稍微提高它？ – Matt

好吧，我只是让它$ img.height（））/ 2.5，它运作良好。 – Matt

也许吧，但是你可以通过“提高”来扩大你的意思吗？ – GregL

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

回答

相关问题