JS鼠标滑过图片时切换图片实现思路

207 阅读 0 评论 137 点赞

我是靠谱客的博主鲤鱼马里奥，最近开发中收集的这篇文章主要介绍JS鼠标滑过图片时切换图片实现思路，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在很多网站上我们会发现当鼠标滑过一张图片后，这张图片切换为了另外的一张图片。这里小编说说这是怎么实现的。

在写Javascript代码前我们必须要有实验的HTML代码

复制代码代码如下:

 
<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代码 ，下面豆芽会写上 
//--> 
</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); 
}); 
}); 

这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。