厘吉科技
您的当前位置:首页JS鼠标滑过图片时切换图片实现思路_javascript技巧

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

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

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



Jquery deal images


//这里是JS代码 ,下面豆芽会写上
//-->






下面来重点分析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);
});
});

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

显示全文