0 
$('#sstar').animate({'opacity':1}, 300);
$('#sstar').animate({
        'backgroundPosition':'0px 0px','top':'30%', 'opacity':0
    }, 500);

CSS

#sstar 
{
    position:absolute;
    left:2px;
    top:10;
    width:126px;
    height:80px;
    background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
    z-index:99999;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

アニメーションの実行が非常に遅いですか？流れ星のように見せるにはどうすればいいですか？

または、jquery を使用して流れ星を表示する例を 1 つ挙げてください。

出力は次のようになります

リンク

4

1 に答える 1

1

一番近いのはこんな感じです。

HTML:

<div id="Background">
    <img src="http://www.com-geo.org/conferences/2011/images/presentations/deco/star_orange_20.png" id="Star" />
</div>​

CSS:

#Background {
    position: relative;
    background-image:url(http://nightsky.org.uk/night_sky_pics/night_sky_1.jpg);
    width: 400px;
    height: 309px;
}

#Star {
    position: absolute;
    right: 20px;
    top: 20px;
}
​

そして、jQuery コードは単純です:

$('#Star').animate({"right": "360px", "top": "150px"}, 1500);​

ライブ テスト ケース。

これは、コンテナー内でイメージ タグを使用して、コンテナー内のイメージの位置をアニメーション化します。

于 2012-08-02T07:13:30.883 に答える