欢迎来到我的网站!
这是一个使用jQuery制作的简单网站,当鼠标移动到不同的图片上时,图片的源文件会发生变化,从而实现动态切换的效果。请点击下方的链接查看效果。
图片切换示例
- 当鼠标移动到(img1)图片上时,图片的源文件会变为”images/d1_1.png”。
- 当鼠标离开(img1)图片时,图片的源文件会变回”images/d1.png”。
- 同理,当鼠标移动到(img2)图片上时,图片的源文件会变为”images/d2_2.png”,当鼠标离开时,会变回”images/d2.png”。
- 对于(img3)图片,操作方式与(img1)、(img2)相同。
如何实现?
这个效果是通过jQuery的mouseenter
和mouseleave
事件来实现的。当鼠标进入元素时,触发mouseenter
事件;当鼠标离开元素时,触发mouseleave
事件。在事件处理函数中,我们通过修改元素的src
属性,来改变图片的源文件。
如何运行?
要运行这个网站,你需要有一个可以托管HTML、CSS和JavaScript文件的服务器,并且已经引入了jQuery库。你可以使用本地服务器软件如Python的SimpleHTTPServer,或者使用一些在线平台如GitHub Pages、Netlify等。然后将上述的HTML、CSS和JavaScript代码保存为一个.html
文件,上传到你的服务器上。最后在浏览器中打开这个文件即可看到效果。