编程 Javascript

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

Posted in Javascript onSeptember 12, 2013

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

在写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鼠标滑过图片时切换图片实现思路

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

Jun 28 Javascript

javascript中键盘事件用法实例分析

Jan 30 Javascript

jQuery实现有动画淡出效果的二级折叠菜单代码

Oct 17 Javascript

详解JS面向对象编程

Jan 24 Javascript

JavaScript获取对象在页面中位置坐标的方法

Feb 03 Javascript

Bootstrap入门书籍之（四）菜单、按钮及导航

Feb 17 Javascript

Vue.js中轻松解决v-for执行出错的三个方案

Jun 09 Javascript

基于zepto.js实现手机相册功能

Jul 11 Javascript

JS正则表达式常见用法实例详解

Jun 19 Javascript

vue学习笔记五：在vue项目里面使用引入公共方法详解

Apr 04 Javascript

vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法

Nov 05 Javascript

JavaScript onclick事件使用方法详解

May 15 Javascript

jQuery实现图片放大预览实现原理及代码

Sep 12 #Javascript

jquery foreach使用示例

Sep 12 #Javascript

jquery 追加tr和删除tr示例代码

Sep 12 #Javascript

实现只能输入数字的input不用replace方法

Sep 12 #Javascript

jQuery 三击事件实现代码

Sep 11 #Javascript

导航跟随滚动条置顶移动示例代码

Sep 11 #Javascript

查找iframe里元素的方法可传参

Sep 11 #Javascript