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()方法再次改变图片的路径,从而实现图片的切换。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM