动态切换图片(改变src属性值)

<p>动态改变HTML图像(动态改变<image>的src属性值</p>
<img src="images/eg_bulboff.gif" id="imgChang" οnclick="imageChange()"/>
<script language="JavaScript" type="text/javascript">
<!--
/*function imageChange() {
img = document.getElementById('imgChang')
if(img.src.match("bulboff")){
img.src = "images/eg_bulbon.gif"
}
else {
img.src = "images/eg_bulboff.gif"
}
}*/
flag=1
function imageChange() {
img = document.getElementById('imgChang')
if(flag){
img.src="images/eg_bulbon.gif";
flag=0
}
else {
img.src = "images/eg_bulboff.gif";
flag=1
}
}
//-->
</script>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS鼠标经过切换图片效果可以通过使用事件监听和DOM操作来实现。首先,我们需要在HTML中创建一个图片元素,并给它一个id,便于后续的操作。接着,在JS中获取这个图片元素,并添加鼠标经过的事件监听函数。当鼠标经过图片时,事件监听函数会被触发。 在事件监听函数中,我们可以通过修图片元素的src属性切换不同的图片。可以事先准备好多张不同的图片,并存储在一个数组中。当鼠标经过时,可以通过一个计数器来控制切换到哪一张图片。每次鼠标经过时,计数器加一,并根据计数器的取出对应的图片并设置为图片元素的src属性。当计数器达到数组的长度时,可以将计数器重置为0,以实现循环切换的效果。 除了切换图片之外,我们还可以在事件监听函数中添加其他的效果,比如改变图片大小、增加透明度、改变位置等。只需要通过修图片元素的CSS属性来实现。 最后,需要注意的是,为了避免多次绑定事件监听函数,需要在鼠标移出图片时,使用removeEventListener方法将事件监听函数移除。这样就可以确保在下一次鼠标经过时,事件监听函数不会重复执行。 总结起来,JS鼠标经过切换图片效果需要使用事件监听和DOM操作。通过监听鼠标经过事件,可以在事件触发时切换图片元素的src属性,实现切换图片的效果。同时,可以通过修CSS属性来添加其他的效果。需要注意的是,在事件监听函数中要确保移除事件监听,以免重复执行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值