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模拟自动点击的简单实例
Aug 08 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
javascript中神奇的 Date对象小结
Oct 12 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
小程序实现留言板
Nov 02 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
Vue分页插件的前后端配置与使用
Oct 09 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 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笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
python的Template使用指南
2014/09/11 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
集中整治工作方案
2014/05/01 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
党员十八大心得体会
2014/09/12 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2014年销售部工作总结
2014/12/01 职场文书
学生个人总结范文
2015/02/15 职场文书
python中的装饰器该如何使用
2021/06/18 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python