我怎样才能以这种情况完美地开始这张图像呢？

发布于 2024-12-15 01:41:33 字数 1028 浏览 0 评论 0原文

我正在将图像从正中心移动到左上角的特定位置。为此，我需要使用绝对定位。但是，在以下情况下，它不会开始居中。解决这个问题的方法是使位置相对，但这样动画就不起作用了。如果我执行类似 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>

原文

I am animating an image from the exact center to a specific position in the top left. To do this, I need to use an absolute positioning. However, in the following situation, it does not start out centered. A solution to this would be making the position relative, but then the animation does not work. And if I do something like left: 35%, it is only centered on MY screen. How can I fix this issue?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暖阳 2024-12-22 01:41:33

如果您希望图像最初隐藏，在窗口的绝对中心淡入，然后缩小到左上角，则可以使用以下方法。

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

If you want the image to be hidden initially, fade in at the absolute center of the window, then shrink to the top left hand corner, then the following will do that.

Note the simple formula to set the initial position of the image, and the use of display: none; to hide the image initially.

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 proof: http://jsfiddle.net/greglockwood/67Z6K/1/

回复收藏 0 原文

~没有更多了~