JS怎样实现鼠标经过切换图片

 时间:2026-02-13 09:11:04

1、准备切换图片素材,一般是两张,如图,小编我放入img文件夹,跟HTML同级哦。

JS怎样实现鼠标经过切换图片

2、然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。

JS怎样实现鼠标经过切换图片

3、如图,现在是静态的,鼠标放上去也不会产生切换反应,因为没有用JS。

JS怎样实现鼠标经过切换图片

4、如图,获取img,转成JS对象,加个[0]就可以转js对象了。

JS怎样实现鼠标经过切换图片

5、然后设定经过事件,切换成另一张图片,这样就产生鼠标经过切换图片的效果了。

JS怎样实现鼠标经过切换图片

6、但是一旦鼠标离开了,就要切换回原来的图片素材,所以再加一个离开事件,这样离开后就变换成原来的图片。

JS怎样实现鼠标经过切换图片

7、如图,现在我的鼠标在图片上,就变成two picture了。(由于不是GIF,所以要自己试下看切换效果哦。)

JS怎样实现鼠标经过切换图片

  • HTML中引入css和js的方法
  • html页面单选框怎么实现
  • html如何把两个网页连接起来
  • 实现整个html居中最简单方法
  • 在css中如何设置左浮动和右浮动?
  • 热门搜索
    人什么什么什么成语 人为什么而活着 1973年出生是什么命 运动裤男 农历十月初一是什么节 麻子是什么 惟妙惟肖什么意思 小蚁运动相机 路径是什么 九里香的养殖方法