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 相关文章推荐
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
Mac下安装vue
Apr 11 Javascript
微信小程序排坑指南详解
May 23 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
angularJs中$scope数据序列化的实例
Sep 30 Javascript
使用原生js编写一个简单的框选功能方法
May 13 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
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
python日期相关操作实例小结
2019/06/24 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
Python整数对象实现原理详解
2019/07/01 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
C#面试题问题集
2016/04/02 面试题
行政办公员自我评价分享
2013/12/14 职场文书
半年思想汇报
2013/12/30 职场文书
电视节目策划方案
2014/05/16 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python