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 国际象棋棋盘 实现代码
Jun 26 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 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.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python实现键盘输入的实操方法
2019/07/16 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
python各种excel写入方式的速度对比
2020/11/10 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
双语教学实施方案
2014/03/23 职场文书
综治工作汇报材料
2014/10/27 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
高二数学教学反思
2016/02/18 职场文书
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js