web前端实验一：利用Js捕获鼠标事件实现图片切换

最新推荐文章于 2022-04-08 11:19:08 发布

_千鸟

最新推荐文章于 2022-04-08 11:19:08 发布

阅读量8.3k

点赞数 3

分类专栏： Web前端实验室

本文链接：https://blog.csdn.net/longteng1116/article/details/8764169

版权

Web前端实验室专栏收录该内容

2 篇文章 0 订阅

订阅专栏

很多时候在做web时，头疼的不是功能的实现，而是前台的界面，下面是介绍关于利用javascript捕获鼠标事件的实验

实验目的：鼠标指向某一图片时，把该图片切换为指定图片，离开时回复原来图片。

实验用途：制作web导航、强调某一功能时非常常用。

直接附上源码，非常简单：

<head>
<title>动态切换图片</title>
<SCRIPT LANGUAGE="JavaScript">
    function changeSrc(obj) {
        obj.src = "img/LOGO1.gif"; //改变图像地址
    }
    function changeSrc2(obj) {
        obj.src = "img/LOGO2.gif"; //改变图像地址
    }
</script>
</head>
<body>
<img  onMouseOver="changeSrc2(this)"  onMouseOut="changeSrc(this)" src="img/LOGO1.gif" />
</body>
</html>

可以将上述代码复制，但是图片得自己找，代码不多，分析难度不大。

原理就是在网页中添加一个图片，默认为logo1.gif，当鼠标移动到图片上时，切换为logo2.gif，鼠标离开时恢复logo1.gif。

知识点：web页面中鼠标事件

onclick              ：    鼠标点击时触发此事件
ondblclick        ：    鼠标双击时触发此事件
onmousedown  ：   按下鼠标时触发此事件
onmouseup      ：   鼠标按下后松开鼠标时触发此事件
onmouseover   ：   当鼠标移动到某对象范围的上方时触发此事件
onmousemove  ：   鼠标移动时触发此事件
onmouseout     ：   当鼠标离开某对象范围时触发此事件

_千鸟

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端实验一：利用Js捕获鼠标事件实现图片切换

很多时候在做web时，头疼的不是功能的实现，而是前台的界面，下面是介绍关于利用javascript捕获鼠标事件的实验实验目的：鼠标指向某一图片时，把该图片切换为指定图片，离开时回复原来图片。实验用途：制作web导航、强调某一功能时非常常用。直接附上源码，非常简单：动态切换图片 function changeSrc(obj) { obj.src =
复制链接

扫一扫