javascript - 実際のウィンドウを開く Javascript

Question

JavaScriptを使ってアニメーションを作ろうとしています。

基本的には壁に窓があり、マウスを乗せると窓が開いて画像が表示されます。

私はこれが本当に具体的であることを知っていますが、JavaScriptが得意な人が私を助けてくれますか?

それについての私の考えgifは、オープニング アニメーションを行う を作成し、javascript を使用してタイミングを制御することです。

どう思いますか？

Answer 1

div を作成し、絶対位置に配置して、この div がウィンドウを表すようにします。次に、アニメーションを表す関数を作成します。関数が呼び出されるたびに、「ウィンドウ」の位置とサイズを少し変更する必要があります。この関数を setTimeout で定期的に呼び出すと、アニメーションが実現します。マウスが消えたら、ロールバック アニメーションを開始する必要があります。JS times についてもう少し読んで、それを書きます。

また、アドバイスとして、常に次のようなホワイトタイムがあります。

setTimeout(func() {
    ....
}, 1000);

この場合、func() は 1000ms 後に呼び出されます。したがって、関数の最後にこのタイマーを追加できます。関数が func() から呼び出されるようにすると、ループが発生します。

これがあなたを助けることを願っています

Answer 2

これが役立つかどうかはわかりませんが、マウスのホバーでドアを開く同様の機能を備えた Web サイトを作成しました。Web サイトはhttp://www.bandofamericasfew.com/です。 ソースを表示して、役立つかどうかを確認してください。ご不明な点がございましたら、お知らせください。