parabola.js抛物线与加入购物车效果的示例代码

前端之家收集整理的这篇文章主要介绍了parabola.js抛物线与加入购物车效果的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在做购物车的时候发现一个很好用抛物线特效parabola.js,可先点击DEMO体验下。下面贴出一些关键代码,具体代码可在GitHub上查看

parabola.js

var defaults = {
speed: 166.67,// 每帧移动的像素大小,每帧(对于大部分显示屏)大约16~17毫秒
curvature: 0.001,// 实际指焦点到准线的距离,你可以抽象成曲率,这里模拟扔物体的抛物线,因此是开口向下的
progress: function () {
},complete: function () {
}
};

var params = {};
options = options || {};

for (var key in defaults) {
params[key] = options[key] || defaults[key];
}

var exports = {
mark: function () {
return this;
},position: function () {
return this;
},move: function () {
return this;
},init: function () {
return this;
}
};

/* 确定移动的方式

  • IE6-IE8 是margin位移
  • IE9+使用transform
    */
    var moveStyle = "margin",testDiv = document.createElement("div");
    if ("oninput" in testDiv) {
    ["","ms","webkit"].forEach(function (prefix) {
    var transform = prefix + (prefix ? "T" : "t") + "ransform";
    if (transform in testDiv.style) {
    moveStyle = transform;
    }
    });
    }

// 根据两点坐标以及曲率确定运动曲线函数(也就是确定a,b的值)
/ 公式: y = axx + bx + c;
*/
var a = params.curvature,b = 0,c = 0;

// 是否执行运动的标志量
var flagMove = true;

if (element && target && element.nodeType == 1 && target.nodeType == 1) {
var rectElement = {},rectTarget = {};

// 移动元素的中心点位置,目标元素的中心点位置
var centerElement = {},centerTarget = {};

// 目标元素的坐标位置
var coordElement = {},coordTarget = {};

// 标注当前元素的坐标
exports.mark = function () {
  if (flagMove == false) return this;
  if (typeof coordElement.x == "undefined") this.position();
  element.setAttribute("data-center",[coordElement.x,coordElement.y].join());
  target.setAttribute("data-center",[coordTarget.x,coordTarget.y].join());
  return this;
}

exports.position = function () {
  if (flagMove == false) return this;

  var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft,scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  // 初始位置
  if (moveStyle == "margin") {
    element.style.marginLeft = element.style.marginTop = "0px";
  } else {
    element.style[moveStyle] = "translate(0,0)";
  }

  // 四边缘的坐标
  rectElement = element.getBoundingClientRect();
  rectTarget = target.getBoundingClientRect();

  // 移动元素的中心点坐标
  centerElement = {
    x: rectElement.left + (rectElement.right - rectElement.left) / 2 + scrollLeft,y: rectElement.top + (rectElement.bottom - rectElement.top) / 2 + scrollTop
  };

  // 目标元素的中心点位置
  centerTarget = {
    x: rectTarget.left + (rectTarget.right - rectTarget.left) / 2 + scrollLeft,y: rectTarget.top + (rectTarget.bottom - rectTarget.top) / 2 + scrollTop
  };

  // 转换成相对坐标位置
  coordElement = {
    x: 0,y: 0
  };
  coordTarget = {
    x: -1 * (centerElement.x - centerTarget.x),y: -1 * (centerElement.y - centerTarget.y)
  };

  /*
   * 因为经过(0,0),因此c = 0
   * 于是:
   * y = a * x*x + b*x;
   * y1 = a * x1*x1 + b*x1;
   * y2 = a * x2*x2 + b*x2;
   * 利用第二个坐标:
   * b = (y2+ a*x2*x2) / x2
   */
  // 于是
  b = (coordTarget.y - a * coordTarget.x * coordTarget.x) / coordTarget.x;

  return this;
};

// 按照这个曲线运动
exports.move = function () {
  // 如果曲线运动还没有结束,不再执行新的运动
  if (flagMove == false) return this;

  var startx = 0,rate = coordTarget.x > 0 ? 1 : -1;

  var step = function () {
    // 切线 y'=2ax+b
    var tangent = 2 * a * startx + b; // = y / x
    // y*y + x*x = speed
    // (tangent * x)^2 + x*x = speed
    // x = Math.sqr(speed / (tangent * tangent + 1));
    startx = startx + rate * Math.sqrt(params.speed / (tangent * tangent + 1));

    // 防止过界
    if ((rate == 1 && startx > coordTarget.x) || (rate == -1 && startx < coordTarget.x)) {
      startx = coordTarget.x;
    }
    var x = startx,y = a * x * x + b * x;

    // <a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>当前位置,这里有测试使用的嫌疑,实际使用可以将这一行注释
    element.setAttribute("data-center",[Math.round(x),Math.round(y)].join());

    // x,y目前是坐标,需要转换成定位的像素值
    if (moveStyle == "margin") {
      element.style.marginLeft = x + "px";
      element.style.marginTop = y + "px";
    } else {
      element.style[moveStyle] = "translate(" + [x + "px",y + "px"].join() + ")";
    }

    if (startx !== coordTarget.x) {
      params.progress(x,y);
      window.requestAnimationFrame(step);
    } else {
      // 运动结束,回调执行
      params.complete();
      flagMove = true;
    }
  };
  window.requestAnimationFrame(step);
  flagMove = false;

  return this;
};

// 初始化<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>
exports.init = function () {
  this.position().mark().move();
};

}

return exports;
};

实现

点击加入购物车查看效果

<div class="img-element" id="imgElement">

<span class="shop-cart-num">0
<div class="add-shop-cart">

数量 proNum = 0;

// 初始化抛物线动画
var myParabola = funParabola(imgElement,shopCartElement,{
speed: 100,// 每帧移动的像素大小
curvature: 0.005,// 实际指焦点到准线的距离
complete: function () {
imgElement.style.visibility = "hidden";
$('.shop-cart-num').text(++proNum);
}
});
// 绑定加入购物车事件
$('.add-shop-cart').click(function () {
// 重置位置
$('#imgElement').css({ left: '70px',bottom: '25px',visibility: 'visible' });

myParabola.position().move();
});

效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章