0

現在、ページに 2 つのフローティング画像があり、コードは次のようになっています。

<html>
<head>
<style type="text/css">

#img1{
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 10;
}

#img2{
  position: fixed;
  right: 10px;
  bottom: 100px;
  z-index: 10;
}

</style>
</head>

<body>
  <img src="IMAGE1.png" id="img1">
  <img src="IMAGE2.png" id="img2">
</body>
</html>

ただし、 img2 が左からその位置にスライドし、 img2 が移動を終了した直後に img1 が表示される間、そこにとどまることを望みます。また、Web ページが開いたときに自動的に行われる必要があります。

私は自分が知っていることを試しましたが、私はまだ非常に初心者なので、どんな助けも大歓迎です. ありがとう！

PS 誰かが各ページ (これは tumblr ブログです) をクリックしている間、画像がそこにとどまり、毎回リセットされないことが理想的です。

4

1 に答える 1

0

私が知る限り、Javascript と CSS3 の 2 つの方法があります。

animateJS では、便利なメソッドが既にある jQuery などのライブラリを使用することをお勧めします: http://api.jquery.com/animate/

(小さな編集)ページの読み込み後にアニメーションを発生させたい場合は、.readyメソッドをチェックアウトしてください: http://api.jquery.com/ready/

CSS3 を使用すると、移行を行うことができます。詳細については、http ://www.w3schools.com/css3/css3_transitions.asp を参照してください。

于 2012-10-04T18:23:29.577 に答える