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 相关文章推荐
js导航菜单(自写)简单大方
Mar 28 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JS实现一个简单的日历
Feb 22 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
React Hooks的深入理解与使用
Nov 12 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和ACCESS写聊天室(八)
2006/10/09 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
使用PHP开发留言板功能
2019/11/19 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python实现大量图片重命名
2020/03/23 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
大学生个人简历中的自我评价
2013/12/27 职场文书
交通安全演讲稿
2014/01/07 职场文书
委托公证书范本
2014/04/03 职场文书
绿色环保标语
2014/06/12 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2015年信访工作总结
2015/04/07 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
初一语文教学反思
2016/03/03 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android