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

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

在写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);
});
});

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

本文地址：https://www.stayed.cn/item/24626

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案