在很多網(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>
復(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);
});
});
新聞熱點(diǎn)
疑難解答
圖片精選
