JS鼠標(biāo)滑過圖片時(shí)切換圖片實(shí)現(xiàn)思路

2019-11-20 22:18:28

字體：大中小

供稿：網(wǎng)友

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

在寫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ì)寫上 
//--> 
</script> 
</head> 

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

下面來重點(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)滑過圖片切換 
$('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)滑過將要切換的圖片時(shí)，替換的圖片還要臨時(shí)下載，加載圖片的過程是比較慢的。所以我們預(yù)載入圖片可以解決這個(gè)問題。

上一篇：JQuery加載圖片自適應(yīng)固定大小的DIV

下一篇：jQuery實(shí)現(xiàn)圖片放大預(yù)覽實(shí)現(xiàn)原理及代碼