jquery实现鼠标移入移出切换图片

在jquery中，可以使用mouseover和mouseout事件来实现鼠标移入移出图片时，改变图片的地址，从而实现图片的切换。下面举例讲解jquery实现鼠标移入移出切换图片。

　　1.新建一个html文件，命名为test.html，用于讲解jquery实现鼠标移入移出切换图片。

 

　　2.在test.html文件内，使用img标签创建一张图片，用于测试。

 

　　3.在test.html文件内，设置img标签的id为myimg，用于下面获得img对象。

 

　　4.在js标签中，使用ready()方法在页面加载完成时，执行function方法，在function方法内，通过id获得img对象，使用on()方法给图片绑定事件。

 

　　5.在on()方法内，使用mouseover事件实现在鼠标移入图片时，通过attr()方法改变图片的路径；使用mouseout事件实现在鼠标移出图片时，通过attr()方法再次改变图片的路径，从而实现图片的切换。

 

查看效果：

 

 

 

 

 

总结

1.使用img标签创建一张图片，用于测试。

2.在js中，使用on()方法给图片绑定事件，在on()方法内，使用mouseover事件实现在鼠标移入图片时，通过attr()方法改变图片的路径；使用mouseout事件实现在鼠标移出图片时，通过attr()方法再次改变图片的路径，从而实现图片的切换。