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获取事件对象代码
Aug 05 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
js定时器实例分享
Dec 20 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 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
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jQuery验证插件 Validate详解
2014/11/20 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
python 切片和range()用法说明
2013/03/24 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
python+Django+apache的配置方法详解
2016/06/01 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
Prototype是怎么扩展DOM的
2014/10/01 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
护理专科自荐书范文
2014/02/18 职场文书
仓库文员岗位职责
2014/04/06 职场文书
中秋晚会策划方案
2014/06/12 职场文书
项目转让协议书
2014/10/27 职场文书
法律讲堂观后感
2015/06/11 职场文书
中学校园广播稿
2015/08/18 职场文书
电台广播稿范文
2015/08/19 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
志愿服务心得体会
2016/01/15 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
Java版 简易五子棋小游戏
2022/05/04 Java/Android