在很多网站上我们会发现当鼠标滑过一张图片后，这张图片切换为了另外的一张图片。这里小编说说这是怎么实现的。
在写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);
});
});
这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。
您可能感兴趣的文章:
- 最简单的js图片切换效果实现代码
- 用html+css+js实现的一个简单的图片切换特效
- 一段非常简单的让图片自动切换js代码
- js图片自动切换效果处理代码
- 纯js实现背景图片切换效果代码
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- js实现支持手机滑动切换的轮播图片效果实例
- 简单的实现点击箭头图片切换的js代码
- css图片切换效果代码[不用js]
- js实现多张图片每隔一秒切换一张图片
