js鼠标经过切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js鼠标经过切换图片</title>
    <script>
        window.onload = function () {
            //获取图片
            var img = document.getElementById("img");

            //鼠标经过图片
            img.onmouseover = function () {
                this.src = "image/8.jpg"
            }

            //鼠标离开图片
            img.onmouseout = function () {
                this.src = "image/9.jpg";
            }
        }
    </script>
</head>
<body>
    <img id="img" src="image/9.jpg"/>
</body>
</html>


  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
JS鼠标经过切换图片效果可以通过使用事件监听和DOM操作来实现。首先,我们需要在HTML中创建一个图片元素,并给它一个id,便于后续的操作。接着,在JS中获取这个图片元素,并添加鼠标经过的事件监听函数。当鼠标经过图片时,事件监听函数会被触发。 在事件监听函数中,我们可以通过修改图片元素的src属性来切换不同的图片。可以事先准备好多张不同的图片,并存储在一个数组中。当鼠标经过时,可以通过一个计数器来控制切换到哪一张图片。每次鼠标经过时,计数器加一,并根据计数器的值取出对应的图片并设置为图片元素的src属性值。当计数器达到数组的长度时,可以将计数器重置为0,以实现循环切换的效果。 除了切换图片之外,我们还可以在事件监听函数中添加其他的效果,比如改变图片大小、增加透明度、改变位置等。只需要通过修改图片元素的CSS属性来实现。 最后,需要注意的是,为了避免多次绑定事件监听函数,需要在鼠标移出图片时,使用removeEventListener方法将事件监听函数移除。这样就可以确保在下一次鼠标经过时,事件监听函数不会重复执行。 总结起来,JS鼠标经过切换图片效果需要使用事件监听和DOM操作。通过监听鼠标经过事件,可以在事件触发时切换图片元素的src属性值,实现切换图片的效果。同时,可以通过修改CSS属性来添加其他的效果。需要注意的是,在事件监听函数中要确保移除事件监听,以免重复执行。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值