Эта статья разделяет анимационный код для JS для реализации параболы продукта, добавленной в корзину для покупок для вашей ссылки. Конкретный контент заключается в следующем
Parapola.js
/** * Zhangxinxu (.com) 2012-12-27 * Вы можете посетить http://www.zhangxinxu.com/wordpress/?p=3855, чтобы получить больше информации * по лицензии MIT */var funparabola = функция (элемент, цель, варианты) {/ * Веб. Несколько сотен пикселей * На странице мы размещаем два объекта, между 200 ~ 800 пикселями, мы можем сопоставить до 2 метров до 8 метров в реальном мире, который составляет 100: 1 * Однако этот метод не отражает это, поэтому нет необходимости обращать внимание на */ var defalaults = {скорость: 166.67, // размер пикселей в каждом рамке. Каждая рамка: для большинства отображений. 0,001, // это на самом деле относится к расстоянию от фокуса до линии. Вы можете абстрагировать это в кривизну. Это имитирует параболу бросания объекта, так что это расходной прогресс вниз: function () {}, complete: function () {}}; var params = {}; Параметры = Параметры || {}; для (var keo in defaults) {params [key] = options [key] || по умолчанию [Key]; } var exports = {mark: function () {вернуть это; }, позиция: function () {вернуть это; }, MOVE: function () {вернуть это; }, init: function () {вернуть это; }}; /* Определить способ перемещения* IE6-IE8-это смещение маржи* IE9+использовать преобразование*/ var movestle = "margin", testdiv = document.createElement ("div"); if ("onInput" в testDiv) {["", "ms", "webkit"]. foreach (function (prefix) {var transform = prefix + (prefix? } // Определить функцию кривой движения на основе координат двух точек и кривизны (то есть определить значения A и B) /*Формула: y = a*x*x + b*x + c; */ var a = params.curvation, b = 0, c = 0; // Значение флага в том, стоит ли выполнять движение var flagmove = true; if (element && target && element.nodetype == 1 && target.nodetype == 1) {var rectelement = {}, recttarget = {}; // Переместите позицию центральной точки элемента, позицию центральной точки целевого элемента var centerelement = {}, centretarget = {}; // Положение координаты целевого элемента var ComportinateElement = {}, координаттаргета = {}; // отметить координаты текущих элементов exports.mark = function () {if (flagMove == false) вернуть это; if (typeof ComportinateElement.x == "undefined") this.position (); element.SetAttribute ("Data-Center", [comportement.x, comportinateElement.y] .join ()); target.setattribute ("Data-Center", [comportTarget.x, comportarget.y] .join ()); вернуть это; } exports.position = function () {if (flagmove == false) вернуть это; var scrollleft = document.documentelement.scrollleft || document.body.scrollleft, scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // начальная позиция if (movestle == "margin") {element.style.marginleft = element.style.margintop = "0px"; } else {element.style [movestle] = "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}; // Положение центральной точки целевого элемента centretarget = {x: recttarget.left + (rectarget.right - recttarget.left) / 2 + scrollleft, y: recttarget.top + (recttarget.bottom - recttarget.top) / 2 + scrolltop}; // преобразовать в относительную координату координат положения = {x: 0, y: 0}; COARDINATETARGET = {x: -1 * (centerElement.x - centretarget.x), y: -1 * (centerelement.y - centretarget.y)}; / * * Потому что после (0, 0), так что c = 0 * so: * y = a * x * x + b * xx; * y1 = a* x1* x1 + b* x1; * y2 = a* x2* x2 + b* x2; * Используйте вторую координату: * b = (y2+ a * x2 * x2) / x2 * / // so b = (comportarget.y - a * comportinateTarget.x * comportarget.x) / comportarget.x; вернуть это; }; // Перемещение в соответствии с этой кривой exports.move = function () {// Если движение кривой не закончилось, новое движение больше не будет выполнено, если (flagmove == false) вернуть это; var startx = 0, rate = comportarget.x> 0? 1: -1; var step = function () {// tangent 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 + ровность * math.sqrt (params.speed / (tangent * tangent + 1)); // Предотвращение трансграничного if ((rap == 1 && startx> comportarget.x) || (rap == -1 && startx <comportinateTarget.x)) {startx = comportinateTarget.x; } var x = startx, y = a * x * x + b * x; // Отметьте текущую позицию, здесь есть подозрение на использование тестирования. В фактическом использовании вы можете прокомментировать эту строку element.setattribute («Центр данных», [math.round (x), math.round (y)]. Join ()); // x, y в настоящее время является координатами и необходимо преобразовать в позиционируемое значение пикселя if (movestle == "margin") {element.style.marginleft = x + "px"; element.style.margintop = y + "px"; } else {element.style [movestle] = "translate (" + [x + "px", y + "px"]. join () + ")"; } if (startx! == ComportinateTarget.x) {params.progress (x, y); window.requestanimationframe (step); } else {// Движение закончилось, обратный вызов выполняет params.complete (); Flagmove = true; }}; window.requestanimationframe (step); Flagmove = false; вернуть это; }; // метод инициализации exports.init = function () {this.position (). Mark (). Move (); }; } вернуть экспорт;};/*! requestAnimationFrame.js * by zhangxinxu 2013-09-30 */(function () {var в прошлое время = 0; var vendors = ['webkit', 'moz']; for (var x = 0; x <vendors.length &&! 'RequestAnimationFrame']; Date (). GetTime (); function (id) {cleartimeout (id);использовать:
/ * element */var element = document.getElementById ("element"), target = document.getElementbyId ("target"); // позиция отмечена элементом Parabola var parabola = funparabola (element, target) .mark (); // триггер Parabola motion Document.onclick = function () {element.style.margyleft emitleft = "0px =" 0PX = "0PX =". element.style.margintop = "0px"; parabola.init ();};Добавьте в корзину в корзине фактический бой:
/ * Этот демонстрационный скрипт основан на iebetter.js, Адрес проекта: https://github.com/zhangxinxu/iebetter.js * /// Elements и некоторые другие переменные Vareleflielement = document.queryselector ("#flyitem"), eleshopcart = документ. myParabola = FunParabola (Eleflyelement, Eleshopcart, {Speed: 400, кривиза: 0,002, полная: function () {eleflyelement.style.visibubite = "hidden"; eleshopcart.queryselector ("span"). eleshopcart) {[] .slice.call (document.getelementsbyclassname ("btncart")). foreach (function (button) {button.addeventListener ("click", function () {// scroll size var scrollft grollft = document.documentelement.scrollleft || document.scrollf Document.documentelement.scrolltop || myParabola.position (). Move (); });}Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.