jquery实现图片的上下缓慢跳动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以轻松地实现复杂的页面效果，包括图片的动画效果。

类型

jQuery 动画效果主要分为以下几类：

基本动画：如 fadeIn(), fadeOut(), slideUp(), slideDown() 等。
自定义动画：通过 animate() 方法可以实现更复杂的动画效果。

应用场景

图片的上下缓慢跳动可以用于网站的焦点图、广告轮播、用户交互提示等场景，增加页面的动态效果和用户体验。

实现方法

下面是一个使用 jQuery 实现图片上下缓慢跳动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上下跳动</title>
    <style>
        #jumping-image {
            position: relative;
            width: 200px;
            height: 200px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <img id="jumping-image" src="your-image-url.jpg" alt="Jumping Image">

    <script>
        $(document).ready(function() {
            function jump() {
                $('#jumping-image').animate({ top: '-=20px' }, 500)
                                 .animate({ top: '+=20px' }, 500, jump);
            }
            jump();
        });
    </script>
</body>
</html>

解释

HTML 部分：定义了一个 img 标签，并设置了其 ID 为 jumping-image。
CSS 部分：设置了图片的初始位置为相对定位。
JavaScript 部分：
- 使用 $(document).ready() 确保 DOM 加载完成后再执行脚本。
- 定义了一个 jump 函数，通过 animate() 方法实现图片上下跳动的效果。
- 第一个 animate() 方法将图片向上移动 20px，持续时间为 500 毫秒。
- 第二个 animate() 方法将图片向下移动 20px，持续时间为 500 毫秒，并在动画完成后递归调用 jump 函数，实现持续跳动的效果。