jquery 上下浮动

jQuery是一种广泛使用的JavaScript库，它提供了一种简化HTML文档遍历和操作、事件处理、动画和AJAX等常见操作的方法。其中，上下浮动是一种常见的动画效果，可以使用jQuery来实现。

// 上下浮动函数
function floatUpDown(ele, duration) {
   $(ele).animate({ top: '-=20px' }, duration)
          .animate({ top: '+=40px' }, duration)
          .animate({ top: '-=20px' }, duration);
}

// 调用上下浮动函数
floatUpDown('#box', 500);

需要传入两个参数，一个是浮动的元素的选择器，另一个是浮动的持续时间。函数内部使用了jQuery的animate方法，该方法可以实现元素的动画效果，可以指定元素的CSS属性，如本例中的top。

如需在页面上实现多个元素的上下浮动效果，可以将上述函数封装成插件，并提供一些可选配置项，如浮动高度、浮动次数、浮动速度等。

// 上下浮动插件
$.fn.floatUpDown = function(options) {
   var defaults = {
      duration: 500,
      height: 20,
      times: 3
   };
   var settings = $.extend(defaults, options);

   return this.each(function() {
      var $this = $(this);
      for(var i = 0; i < settings.times; i++) {
         $this.animate({ top: '-=' + settings.height + 'px' }, settings.duration)
              .animate({ top: '+=' + (2 * settings.height) + 'px' }, settings.duration)
              .animate({ top: '-=' + settings.height + 'px' }, settings.duration);
      }
   });
}

// 调用上下浮动插件
$('#box1, #box2').floatUpDown({
   duration: 800,
   height: 30,
   times: 5
});

插件中使用了$.fn的方式定义了floatUpDown函数，该函数可以直接作用于jQuery对象，如$('#box1, #box2')。

总之，上下浮动是一种简单实用的动画效果，使用jQuery可以轻松实现该效果，并适配不同的场景需求。