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 相关文章推荐
AngularJS入门教程(一):静态模板
Dec 06 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
AJAX检测用户名是否存在的方法
Mar 24 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
服务器web工具 php环境下
2010/12/29 PHP
php开发工具有哪五款
2015/11/09 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
Python基类函数的重载与调用实例分析
2015/01/12 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
如何基于Python批量下载音乐
2019/11/11 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
英国团购网站:Groupon英国
2017/11/28 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
委托书怎样写
2014/08/30 职场文书
小学庆六一主持词
2015/06/30 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python