jquery飘窗插件,可自适应浏览器宽高的变化



$('#id').autoMove({angle:-Math.PI/4, speed: 200});

<script>
(function($) {
  /**
   * Description: jquery飘窗插件,可自适应浏览器宽高的变化
   * param: args={startL:default, startT:default, angle:-Math.PI/4, speed: 125}
   * 参数说明: startL飘窗初始时距离左边的距离, startT飘窗初始化距离顶部的距离, angle飘窗初始运动方向, speed运动速度(px/s)
   */
  $.fn.autoMove = function(args) {
      // 工具函数判断边距
      function isTop(pos, w_w, w_h, d_w, d_h) { // 飘窗到达上边距
          return (pos.top <= 0);
      }

      function isBottom(pos, w_w, w_h, d_w, d_h) { // 飘窗到达下边距
          return (pos.top >= (w_h - d_h));
      }

      function isLeft(pos, w_w, w_h, d_w, d_h) { // 飘窗到达左边距
          return (pos.left <= 0);
      }

      function isRight(pos, w_w, w_h, d_w, d_h) { // 飘窗到达右边距
          return (pos.left >= (w_w - d_w));
      }

      return this.each(function() {
          var w_w = parseInt($('body').width()),
              w_h = parseInt($(window).height()),
              d_w = parseInt($(this).width()),
              d_h = parseInt($(this).height()),
              d_l = (w_w - d_w) / 2,
              d_t = (w_h - d_h) / 2,
              max_l = w_w - d_w,
              max_t = w_h - d_h;

          // 位置及参数的初始化
          var setobj = $.extend({startL: d_l, startT: d_t, angle: Math.PI / 4, speed: 100}, args);
          $(this).css({position: 'fixed', left: setobj['startL'] + 'px', top: setobj['startT'] + 'px'});
          var position = {left: setobj['startL'], top: setobj['startT']}; // 飘窗位置对象
          var that = $(this);
          var angle = setobj.angle;
          var time = 10; // 控制飘窗运动效果,值越小越细腻
          var step = setobj.speed * (time / 1000); // 计算运动步长
          var decoration = {x: step * Math.cos(angle), y: step * Math.sin(angle)}; // 计算二维上的运动增量
          var mvtid;
          var animationRunning = true; // 添加标志变量

          $(window).on('resize', function() { // 窗口大小变动时重新设置运动相关参数
              w_w = parseInt($(window).width());
              w_h = parseInt($(window).height());
              max_l = w_w - d_w;
              max_t = w_h - d_h;
          });

          function move() {
              if (!animationRunning) return; // 如果暂停则返回
              
              position.left += decoration.x;
              position.top += decoration.y;

              if (isLeft(position, w_w, w_h, d_w, d_h) || isRight(position, w_w, w_h, d_w, d_h)) {
                  decoration.x = -1 * decoration.x;
              }
              if (isTop(position, w_w, w_h, d_w, d_h) || isBottom(position, w_w, w_h, d_w, d_h)) {
                  decoration.y = -1 * decoration.y;
              }

              that.animate({left: position.left, top: position.top}, time, function() {
                  mvtid = setTimeout(move, time); // 在回调中递归调用move以确保连续运动
              });
          }

          move(); // 触发动作

          that.on('mouseenter', function() {
              animationRunning = false; // 设置为暂停
              clearTimeout(mvtid); // 清除定时器
              that.stop(true, true); // 立即停止所有动画
          }).on('mouseleave', function() {
              animationRunning = true; // 恢复运行
              move(); // 重新开始动画
          });
      });
  }; // end plugin definition
})(jQuery);
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值