2016年鼠标移动到图片上时图片向上动一下

jQuery实现了将鼠标移到图片上的特殊效果

更新时间：2016年12月8日14:10:45作者：candy_tity

本文主要介绍jQuery，以实现将鼠标移到图片上的特殊效果。当鼠标在图片上移动时，图片将向上移动。鼠标离开后，图片返回到原始位置。它具有一定的参考价值，值得关注。朋友可以参考

在Web应用程序中，鼠标操作是最常见和最频繁的操作。当用户移动鼠标来浏览页面时，一些交互式的特殊效果提醒将增强用户体验，并使用户感到该页面正在与他“进行通信”，从而增加了用户在页面上的停留时间，并增加了深入访问。

今天，蒂蒂将带您举一个简单的例子。当鼠标移到图片上时，图片将向上移动。鼠标离开时，图片将返回其原始位置。

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

页面布局部分：

样式部分：

在这里，我们需要介绍jQuery插件库。建议您尽可能使用jQuery，因为许多插件都是基于jQuery开发的。

功能的实现主要使用jQuery中提供的悬停方法。该方法的语法为：

$（'demo'）。hover（function（）{}，function（）{}）;

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

该示例的相应JS部分是：

这是实现图片移动的方法。通过CSS中的定位，当鼠标移入时图片会向上移动10个像素，而当鼠标移出时图片会恢复到原始位置。

上面的例子只是一个简单的指令，更多特殊效果可以用animate方法编写。同时，除了之外，它还可以显示和隐藏文本，替换图片等。

以上是本文的全部内容。我希望它对每个人的学习都有帮助，也希望您能更多地支持Scripthome。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-366070-1.html