在很多網(wǎng)站上我們會(huì)發(fā)現(xiàn)當(dāng)鼠標(biāo)滑過(guò)一張圖片后，這張圖片切換為了另外的一張圖片。這里小編說(shuō)說(shuō)這是怎么實(shí)現(xiàn)的。

在寫(xiě)Javascript代碼前我們必須要有實(shí)驗(yàn)的HTML代碼

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Jquery deal images</title> 
<script src="./js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
<!-- 
//這里是JS代碼 ，下面豆芽會(huì)寫(xiě)上 
//--> 
</script> 
</head> 

<body> 
<img src="./images/img02.png" /> 
</body> 
</html> 

下面來(lái)重點(diǎn)分析JS代碼

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
var newImage = new Image(); //預(yù)載入圖片 
var oldImage = $('img').attr('src'); 
newImage.src = './images/img03.jpg'; 
$('img').hover(function(){ //鼠標(biāo)滑過(guò)圖片切換 
$('img').attr('src',newImage.src); 
}, 
function(){ 
$('img').attr('src',oldImage); 
}); 
}); 

這里大家迷惑的是為什么要預(yù)載入圖片呢？因?yàn)樵诰W(wǎng)站上不像我們本地調(diào)試，圖片下載這么快。如果是在互聯(lián)網(wǎng)上，當(dāng)鼠標(biāo)滑過(guò)將要切換的圖片時(shí)，替換的圖片還要臨時(shí)下載，加載圖片的過(guò)程是比較慢的。所以我們預(yù)載入圖片可以解決這個(gè)問(wèn)題。

您可能感興趣的文章:

相關(guān)文章

JavaScript異步編程之Promise的初步使用詳解
這篇文章主要介紹了JavaScript異步編程之Promise的初步使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
JavaScript中for of和for in的區(qū)別詳解
對(duì)于初學(xué)者，我們或許只知道無(wú)論是for of還是for in他們都有一個(gè)功能那就是遍歷，至于具體的細(xì)節(jié)或許我們不是很清楚，那么接下來(lái)我們就來(lái)詳細(xì)的區(qū)分一下for of和for in他們之間的不同點(diǎn)和相同點(diǎn),需要的朋友可以參考下
2023-06-06
理解Javascript_01_理解內(nèi)存分配原理分析
在正式開(kāi)始之前，我想先說(shuō)兩句，理解javascript系列博文是通過(guò)帶領(lǐng)大家分析javascript執(zhí)行時(shí)的內(nèi)存分配情況，來(lái)解釋javascript原理，具體會(huì)涵蓋javascript預(yù)加載，閉包原理，面象對(duì)象，執(zhí)行模型，對(duì)象模型...,文章的視角很特別，也非常深入，希望大家能接受這種形式，并提供寶貴意見(jiàn)。
2010-10-10
javascript在事件監(jiān)聽(tīng)方面的兼容性小結(jié)
javascript 在事件監(jiān)聽(tīng)方面的兼容性總結(jié)，注意是由于多個(gè)瀏覽器的不一致，導(dǎo)致大家在js書(shū)寫(xiě)時(shí)需要考慮多個(gè)瀏覽器的兼容性。
2010-04-04
JS獲取select的value和text值的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)JS獲取select的value和text值的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
Bootstarp在pycharm中的安裝及簡(jiǎn)單的使用方法
這篇文章主要介紹了Bootstarp在pycharm中的安裝及簡(jiǎn)單的使用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
js的各種排序算法實(shí)現(xiàn)(總結(jié))
下面小編就為大家?guī)?lái)一篇js的各種排序算法實(shí)現(xiàn)(總結(jié))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
js混淆加密之jsjiami.v6分析
這篇文章主要為大家介紹了js混淆加密之jsjiami.v6分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
angular-tree-component的使用詳解
這篇文章主要介紹了angular-tree-component的使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果
這篇文章主要介紹了JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動(dòng)效果的相關(guān)資料,非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06