多くの Web サイトでは、マウスを画像上でスライドさせると、画像が別の画像に切り替わります。ここで編集者がこれを実現する方法について語ります。 JavaScript コードを記述する前に、実験用の HTML コードが必要です コードをコピーします コードは次のとおりです: > Jquery 取引イメージ <br><スクリプト タイプ= "text/javascript"> <br><!-- <BR>//もやしの下に JS コードが記述されます <BR>//--> ; <br> <br><body> <br></body> </html> ; <br><br> <br>JS コードの分析に集中しましょう<br><br><br> </div> <br>コードをコピーします<br><div class="codetitle"> <span> <a style="CURSOR: pointer" data="11869" class="copybut" id="copybut11869" onclick="doCopy('code11869')"><u> </u>$(document).ready(function(){ </a>var newImage = new Image(); //画像をプリロード</span>var oldImage = $('img' ).attr('src' ); </div>newImage.src = './images/img03.jpg'; <div class="codebody" id="code11869">$('img').hover(function(){ //画像の上にマウスを置くと切り替わります<br>$('img' ).attr('src',newImage.src); <br>}, <br>function(){ <br>$('img').attr('src',oldImage ); <br>}); <br>}); <br><br> <br>ここで誰もが混乱しているのは、なぜ画像をプリロードする必要があるのかということです。 Web サイトでのローカル デバッグとは異なり、画像のダウンロードが非常に速いためです。インターネット上の場合、切り替えたい画像上でマウスをスライドさせると、一時的に差し替え画像がダウンロードされるため、画像の読み込み処理が比較的遅くなります。したがって、画像をプリロードすることでこの問題を解決できます。</div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
