Как я могу начать это изображение идеально в центре этой ситуации? - PullRequest
Новая
       11

Как я могу начать это изображение идеально в центре этой ситуации?

1 голос
/ 11 ноября 2011

Я анимирую изображение от точного центра к определенной позиции в левом верхнем углу.Для этого мне нужно использовать абсолютное позиционирование.Однако в следующей ситуации он не начинается по центру.Решением этой проблемы было бы сделать положение относительным, но тогда анимация не работает.И если я сделаю что-то вроде 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>

1 Ответ

0 голосов
/ 11 ноября 2011

Если вы хотите, чтобы изображение было изначально скрыто, постепенно исчезало в абсолютном центре окна, а затем уменьшалось до верхнего левого угла, тогда это будет сделано следующим образом.

Обратите внимание на простую формулу:установить начальную позицию изображения и использовать 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/

...