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

这里大家迷惑的是为什么要预载入图片呢?因为在网站上不像我们本地调试,图片下载这么快。如果是在互联网上,当鼠标滑过将要切换的图片时,替换的图片还要临时下载,加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。
Javascript 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
jqTransform美化表单
Oct 10 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
Js面试算法详解
Apr 08 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
JavaScript监听键盘事件代码实现
Jun 03 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
You might like
PHP 采集获取指定网址的内容
2010/01/05 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
JS获取时间的方法
2015/01/21 Javascript
简介JavaScript中fixed()方法的使用
2015/06/08 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
微信小程序页面上下滚动效果
2020/11/18 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
详解如何修改python中字典的键和值
2020/09/29 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
婚前协议书范本
2014/10/27 职场文书
高校教师个人总结
2015/02/10 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android