jQuery实现了鼠标滑过图片的特殊效果

在web应用程序中，鼠标操作是最常见和最频繁的操作。当用户移动鼠标浏览页面时，一些互动特效的提醒会增强用户的体验，让用户感觉页面在和他交流，从而增加用户在页面上的停留时间，增加深度访问的可能性。

今天，蒂蒂将给大家举一个简单的例子。当鼠标在图片上移动时，图片会向上移动。当鼠标离开时，图片会回到原来的位置。

首先，让我们做如下图所示的页面布局：

页面布局部分：

ul liimg src=' http : images/1 . jpg '/Li liimg src=' http 3360 images/2 . jpg '/Li liimg src=' http : images/3 . jpg '/Li liimg src=' http 3360 images/4 . jpg '/Li/ul style部分：

style type='text/css' ul，li { display: blockmargin : 0；padd : 0；list-style:无；} ul { width: 800pxheight: 210pxborder: 1px固体# 333；margin: 100px自动；padding: 0 5px} li { position:相对位置；向左浮动：宽度： 190 px；高度： 190像素；margin: 10px 5px} img { position: absolutetop : 0；left : 0；宽度： 100%；高度： 100%；cursor:指针；}/style在这里，我们需要介绍一下jQuery插件库。建议尽量使用jQuery，因为很多插件都是基于jQuery开发的。

脚本类型=' text/JavaScript ' src=' http : jquery-1 . 11 . 3 . min . js '/脚本

动画功能主要使用jQuery中提供的悬停方法来实现，该方法的语法如下：

$(“演示”)。悬停(function(){}，function(){ })；

这里，悬停方法可以接收两个参数。第一个参数对应的方法表示鼠标移入时的方法，第二个方法表示鼠标移出时的方法。

示例对应的JS部分是：

脚本类型=' text/JavaScript ' $(function(){ $(' img '))。悬停(function(){ $(this))。动画({ 'top' : '-10px' }，' normal ')；}，function(){ $(this)。动画({ 'top' : '0px' }，' normal ')；});})/脚本在这里，图片被动画移动。有了CSS中的定位，鼠标移入时图片上移10个像素，鼠标移出时图片又回到原来的位置。

上面的例子只是一个简单的指令，动画的方法可以写出更多的特效。同时，除了动画，还可以显示和隐藏角色，替换图片等。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。