この記事の例では、js で画像の浮遊効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。 説明: Web ページを開くと、クリックして他のページに接続する画像が表示されます。これには強調効果があります。 コードをコピー コードは次のとおりです: テスト <br> #すべて{ 幅: 100%;高さ: 3000px;} <br> </スタイル> <br> </head> <br> <br> <div id="すべて"> <br> <div id="img" style="位置: 絶対; z-index:99;"> <br> <a href="#" target="_blank"><img src="Images/OPVTI.jpg" border="0" style="カーソル: ポインタ;" style="カーソル:ポインタ;" /></a> <br /> <スクリプト言語="JavaScript"> <br> <!--開始<br /> var xPos = document.body.clientWidth - 20; <br /> var yPos = document.body.clientHeight / 2; <br /> 変数ステップ = 1; <br /> var 遅延 = 10; <br /> var 高さ = 0; <br /> var ホオフセット = 0; <br /> var Woffset = 0; <br /> 変数 = 0; <br /> var xon = 0; <br /> var 一時停止 = true; <br /> var 間隔; <br /> img.style.top = yPos; <br /> 関数changePos() { <br /> 幅 = document.body.clientWidth; <br /> 高さ = document.body.clientHeight; <br /> ホオフセット = img.offsetHeight; <br /> Woffset = img.offsetWidth; <br /> img.style.left = xPos document.body.scrollLeft; <br /> img.style.top = yPos document.body.scrollTop; <br /> if (よ) { <br /> yPos = yPos ステップ; <br /> } else { <br /> yPos = yPos - ステップ; <br /> } <br /> if (yPos < 0) { <br /> ヨン = 1; <br /> yPos = 0; <br /> } <br /> if (yPos >= (高さ - ホオフセット)) { <br /> ヨン = 0; <br /> yPos = (高さ - ホオフセット); <br /> } <br /> if (xon) { <br /> xPos = xPos ステップ; <br /> } else { <br /> xPos = xPos - ステップ; <br /> } <br /> if (xPos < 0) { <br /> xon = 1; <br /> xPos = 0; <br /> } <br /> if (xPos >= (幅 - Woffset)) { <br /> xon = 0; <br /> xPos = (幅 - Woffset); <br /> } <br /> } <br /> 関数 start() { <br /> img.visibility = "可視"; <br /> 間隔 = setInterval('changePos()', 遅延); <br /> } <br /> 関数pause_resume() { <br /> if (一時停止) { <br /> クリアインターバル(間隔); <br /> 一時停止 = false; <br /> } else { <br /> 間隔 = setInterval('changePos()', 遅延); <br /> 一時停止 = true; <br /> } <br /> } <br />開始(); // 終了 --> <br /> </div> <br> </本文> <br> </html><br><br> <br>この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。 </div>
