基于jQuery制作小图标上下滑动特效

下面是详细的攻略：

1.准备工作

首先，需要确保引入了jQuery库，并且在标签中放置以下代码:

<script type="text/javascript">
 $(document).ready(function(){

 });
 </script>

接着，在html中插入一个列表，并且用class来添加样式：

<ul class="slide">
  <li>图标1</li>
  <li>图标2</li>
  <li>图标3</li>
  <li>图标4</li>
</ul>

2.制作动画

我们需要用jQuery的animate方法来制作这个上下滑动特效。

下面的示例代码中，我们将为列表中的每个图标设置一个动画。每个图标的动画会在上一个动画结束后启动。

代码如下：

$(document).ready(function(){
   $(".slide li").each(function(index) {
      $(this).delay(300*index).animate({top:"-15px"}, 200).animate({top:"0"}, 200);
   });
});

上述代码的含义是，为每个列表项设置一个动画，它们依次启动，在上一个动画结束后启动，间隔时间为300毫秒。当动画启动时，它们会向上移动15像素，然后再返回原始位置。

3.效果展示

下面是两个示例代码，分别用于在页面载入时产生上下滑动特效和在鼠标移入时产生特效。

实例一：

当页面载入时，每个图标都将向上下滑动一次。以下是代码：

$(document).ready(function(){
   $(".slide li").each(function(index) {
      $(this).delay(300*index).animate({top:"-15px"}, 200).animate({top:"0"}, 200);
   });
});

实例二：

当鼠标移入图标时，它将向上下滑动一次。以下是代码：

$(".slide li").mouseover(function(){
      $(this).animate({top:"-15px"}, 200).animate({top:"0"}, 200);
   });

4.总结

通过使用这个简单的jQuery动画，我们可以创建一个具有生动效果的界面，让用户感受到更加良好的用户体验。

通过以上教程，您应该已经掌握了如何制作一个基于jQuery的滑动特效。希望能对您实际工作中的页面设计有所帮助。