JavaScript简单实现鼠标移动切换图片的方法


Posted in Javascript onFebruary 23, 2016

本文实例讲述了JavaScript简单实现鼠标移动切换图片的方法。分享给大家供大家参考,具体如下:

<title>JavaScript切换图片</title>
<script>
function showDaTu(src){
document.getElementById("defaultImg").src=src;
}
</script>
<img src="images/wall1.jpg" id="defaultImg">
<br><br><br>
<img src='images/wall_s1.jpg' onmouseover="showDaTu('images/wall1.jpg')">
<img src='images/wall_s2.jpg' onmouseover="showDaTu('images/wall2.jpg')">
<img src='images/wall_s3.jpg' onmouseover="showDaTu('images/wall3.jpg')">
<img src='images/wall_s4.jpg' onmouseover="showDaTu('images/wall4.jpg')">
<br>因图片较大,请等待图片加载完成……然后鼠标放小图上就会切换了。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
js实现带箭头的进度流程
Mar 26 Javascript
Vue实现附件上传功能
May 28 Javascript
jQuery实现返回顶部功能
Feb 23 #Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 #Javascript
理解javascript定时器中的单线程
Feb 23 #Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 #Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 #Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 #Javascript
javascript每日必学之多态
Feb 23 #Javascript
You might like
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
PHP实现通过URL提取根域名
2016/03/31 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python常用库推荐
2016/12/04 Python
分享几道你可能遇到的python面试题
2017/07/24 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
计算机专业求职信
2014/06/02 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
《全神贯注》教学反思
2016/02/22 职场文书