この記事では、JSのアニメーションコードを共有して、リファレンスのためにショッピングカートに追加された製品の放物線を実装しています。特定のコンテンツは次のとおりです
parapola.js
/*！ * Zhangxinxu（.com）2012-12-27 * by http://www.zhangxinxu.com/wordpress/?p=3855にアクセスして、より多くの情報を取得するために */var funparabola = funce（要素、ターゲット、オプション）{/ * *ウェブページが必要な場合は、スケールページに基づいて、insaps baked as a suld pixed baked baked baked baked baked baked baked as asectionページに数百ピクセル *が、200〜800ピクセルの間に2つのオブジェクトを配置します。実際の世界では2メートルから8メートルにマッピングできます。これは100：1 *です。ただし、この方法はこれを反映していないため、 */ varデフォルト= {速度：166.67、//各フレームのサイズのサイズは、ほとんどのフレームである〜17ミルのピクセルサイズです。 0.001、//実際には、焦点からラインまでの距離を指します。曲率に抽象化することができます。これは、オブジェクトを投げるという放物線をシミュレートするので、それはオープニングの下向きの進行です：function（）{}、complete：function（）{}}; var params = {};オプション=オプション|| {}; for（defaultsのvarキー）{params [key] = options [key] ||デフォルト[key]; } var exports = {mark：function（）{return this; }、position：function（）{return this; }、move：function（）{return this; }、init：function（）{return this; }}; /*移動方法を決定* IE6-IE8はマージン変位ですif（ "oninput" in testdiv）{["" "、" ms "、" webkit "]。 } // 2つの点と曲率の座標（つまり、aとbの値を決定する）に基づいてモーション曲線関数を決定します /*式：y = a*x*x + b*x + c; */ var a = params.curvature、b = 0、c = 0; // Motion var flagmove = trueを実行するかどうかのフラグ値。 if（element && target && element.nodetype == 1 && target.nodetype == 1）{var rectelement = {}、recttarget = {}; //要素の中心点位置、ターゲット要素の中心点位置var centerelement = {}、centertarget = {}; //ターゲット要素の座標位置var coordineTionelement = {}、coordinateTarget = {}; //現在の要素のexports.mark = function（）の座標をマークします{if（flagmove == false）thisを返します。 if（typeof coordinetingelement.x == "未定義"）this.position（）; element.setAttribute（ "data-center"、[coordelement.x、coordinetingelement.y] .jein（））; Target.SetAttribute（ "data-center"、[coordtarget.x、coordtarget.y] .jein（））;これを返します。 } 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）"; } // 4つのエッジの座標rectelement = element.getBoundingClientRect（）; recttarget = target.getBoundingClientRect（）; //移動要素の中心点の座標= {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}; //相対座標位置コーディネメントに変換= {x：0、y：0}; CoordinateTarget = {x：-1 *（centerElement.x -centertarget.x）、y：-1 *（centerelement.y -centertarget.y）}; / * *（0、0）後、so c = 0 * so： * y = a * x * x + b * xx; * y1 = a* x1* x1 + b* x1; * y2 = a* x2* x2 + b* x2; * 2番目の座標を使用します： * b =（y2+ a * x2 * x2） / x2 * / // so b =（coordtarget.y -a * coordinateTarget.x * coordtarget.x） / coordtarget.x;これを返します。 }; //この曲線に従って移動します。move= function（）{//曲線運動が終了していない場合、（flagmove == false）これを返す場合、新しい動きは実行されなくなります。 var startx = 0、rate = coordtarget.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 + rate * math.sqrt（params.speed /（tangent * tangent + 1））; //クロスボーダーを防ぐif（（reate == 1 && startx> coordtarget.x）||（reate == -1 && startx <coordinateTarget.x））{startx = coordinateTarget.x; } var x = startx、y = a * x * x + b * x; //現在の位置をマークすると、ここで使用のテストの疑いがあります。実際に使用すると、このLine Element.setattribute（ "data-center"、[math.round（x）、math.round（y）]。join（））をコメントできます。 // x、yは現在座標であり、配置されたピクセル値に変換する必要があります（movestyle == "margin"）{element.style.marginleft = x + "px"; element.style.margintop = y + "px"; } else {element.style [movestyle] = "translate（" + [x + "px"、y + "px"]。join（） + "）"; } if（startx！== coordinateTarget.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（）; }; } return exports;};/*！ RequestAnimationFrame.js * by Zhangxinxu 2013-09-30 */（function（）{var lasttime = 0; var vendors = ['webkit'、 'moz']; 「requestanimationframe」日付（） function（id）{cleartimeout（id）}}};使用：
/ *要素 */var要素= document.getElementById（ "要素"）、ターゲット= document.getElementById（ "ターゲット"）; element.style.margintop = "0px"; parabola.init（）;};
ショッピングカートの実際の戦闘に追加します：
/ *このデモスクリプトは、iebetter.js、プロジェクトアドレスに基づいています：https：//github.com/zhangxinxu/iebetter.js * ///要素およびその他の変数var eleflyement = document.queryselector（ "＃flyitem"）、eleshopcart = documentem = queryselecter myparabola = funparabola（eleflyelement、eleshopcart、{speed：400、curvature：0.002、complete：function（）{eleflyelement.style.visibility = "hidden"; eleshopcart.queryselector（ "span"）。innerhtml = ++ umblyementem;} eleshopcart）{[] .slice.call（document.getElementsByClassName（ "btncart"））。 document.scrolltop.scrolltop || myparabola.position（）。 }）;}上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。