萬盛學電腦網 >> 腳本專題 >> javascript >> JS鼠標滑過圖片圖片切換效果
JS鼠標滑過圖片圖片切換效果
JS鼠標滑過圖片圖片切換效果
在很多網站上我們會發現當鼠標滑過一張圖片後，這張圖片切換為了另外的一張圖片。這裡站長地帶說說這是怎麼實現的。
在寫Javascript代碼前我們必須要有實驗的HTML代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery deal images www.zzarea.com</title>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//這裡是JS代碼 ，下面豆芽會寫上
//-->
</script>
</head>
<body>
<img src="./images/img02.png" />
</body>
</html>
下面來重點分析JS代碼
$(document).ready(function(){
var newImage = new Image(); //預載入圖片
var oldImage = $('img').attr('src');
newImage.src = './images/img03.jpg';
$('img').hover(function(){ //鼠標滑過圖片切換
$('img').attr('src',newImage.src);
},
function(){
$('img').attr('src',oldImage);
});
});
這裡大家迷惑的是為什麼要預載入圖片呢？因為在網站上不像我們本地調試，圖片下載這麼快。如果是在互聯網上，當鼠標滑過將要切換的圖片時，替換的圖片還要臨時下載，加載圖片的過程是比較慢的。所以我們預載入圖片可以解決這個問題。
(
