在jquery中,可以使用mouseover和mouseout事件来实现鼠标移入移出图片时,改变图片的地址,从而实现图片的切换。下面小编举例讲解jquery实现鼠标移入移出切换图片。
工具/原料
html+jquery
代码编辑器:DreamweaverCS5
方法/步骤
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()方法再次改变图片的路径,从而实现图片的切换。
6、在浏览器打开test.html文件,查看实现的效果。