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 相关文章推荐
读jQuery之十 事件模块概述
Jun 27 Javascript
js propertychange和oninput事件
Sep 28 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
浅析创建javascript对象的方法
May 13 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
react-router 路由切换动画的实现示例
Dec 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
Phpbean路由转发的php代码
2008/01/10 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
js获取当月最后一天实例代码
2013/11/19 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
node使用request请求的方法
2019/12/20 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
使用Python实现租车计费系统的两种方法
2018/09/29 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
教师简历自我评价
2014/02/03 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
婚庆答谢词大全
2015/09/29 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis