在网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他“交流”,从而增加用户在页面的逗留时间,以及增加深层次访问的可能性。
今天tity带大家做一个简单的示例,当鼠标移动到图片上的时候图片会向上动一下,等到鼠标离开后,图片又返回到原来的位置。
首先,我们先来做如下图所示的页面布局:
页面布局部分:




样式部分:
@H_502_23@
这里我们需要引入jQuery插件库,建议大家尽量使用jQuery,因为很多插件都是基于jQuery开发的。
动画功能的实现,主要是使用jQuery中提供的hover方法,该方法的语法为:
这里hover方法可以接收两个参数,第一个参数对应的方法表示鼠标移入时候的方法,第二个方法表示鼠标移出时候的方法。 示例对应的JS部分为: