JS鼠标滑过图片时切换图片实现思路
更新时间：2013年09月12日 16:24:45 作者：
在浏览网页时会看到这样的效果：当鼠标滑过一张图片后，这张图片切换为了另外的一张图片，下面为大家介绍下具体是如何实现的，感兴趣的朋友不要错过
在很多网站上我们会发现当鼠标滑过一张图片后，这张图片切换为了另外的一张图片。这里小编说说这是怎么实现的。
在写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);
});
});
这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。
在写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);
});
});
这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。
相关文章
这篇文章主要介绍了JavaScript异步编程之Promise的初步使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
对于初学者，我们或许只知道无论是for of还是for in他们都有一个功能那就是遍历，至于具体的细节或许我们不是很清楚，那么接下来我们就来详细的区分一下for of和for in他们之间的不同点和相同点,需要的朋友可以参考下2023-06-06
在正式开始之前，我想先说两句，理解javascript系列博文是通过带领大家分析javascript执行时的内存分配情况，来解释javascript原理，具体会涵盖javascript预加载，闭包原理，面象对象，执行模型，对象模型...,文章的视角很特别，也非常深入，希望大家能接受这种形式，并提供宝贵意见。2010-10-10
javascript 在事件监听方面的兼容性总结，注意是由于多个浏览器的不一致，导致大家在js书写时需要考虑多个浏览器的兼容性。2010-04-04
本篇文章主要是对JS获取select的value和text值的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了Bootstarp在pycharm中的安装及简单的使用方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
下面小编就为大家带来一篇js的各种排序算法实现(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家介绍了js混淆加密之jsjiami.v6分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了angular-tree-component的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了JavaScript代码实现图片循环滚动效果的相关资料,非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论