Artikel ini membagikan kode animasi untuk JS untuk mengimplementasikan parabola produk yang ditambahkan ke keranjang belanja untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Parapola.js
/*! * Oleh Zhangxinxu (.com) 2012-12-27 * Anda dapat mengunjungi http://www.zhangxinxu.com/wordpress/?p=3855 untuk mendapatkan informasi lebih lanjut * di bawah lisensi MIT */var funparabola = Fungsi (elemen, target, opsi) {/ * Halaman web yang dibutuhkan bilah skala * jika itu adalah level * jika itu adalah halaman (elemen, target, opsi) {/ * * Bergerak beberapa ratus piksel * Pada halaman, kami menempatkan dua objek, antara 200 ~ 800 piksel, kami dapat memetakan hingga 2 meter hingga 8 meter di dunia nyata, yaitu 100: 1 * Namun, metode ini tidak mencerminkan hal ini, jadi tidak perlu memperhatikan 10 millis. Kelengkungan: 0,001, // Ini benar -benar mengacu pada jarak dari fokus ke garis. Anda dapat mengabstraksikannya menjadi kelengkungan. Ini mensimulasikan parabola melempar objek, jadi ini adalah progres pembukaan ke bawah: function () {}, lengkap: function () {}}; var params = {}; opsi = opsi || {}; untuk (tombol var di default) {params [key] = options [key] || default [key]; } var ekspor = {mark: function () {return ini; }, position: function () {return ini; }, pindahkan: function () {return ini; }, init: function () {return ini; }}; /* Tentukan cara untuk bergerak* IE6-IE8 adalah perpindahan margin* IE9+Gunakan transformasi*/ var movestyle = "margin", testDiv = document.createElement ("div"); if ("onInput" di testDiv) {["", "ms", "WebKit"]. foreach (function (prefix) {var transform = prefix + (prefix? "t": "t") + "ransform"; if (transform in testDiv.style) {movestyle = transform;}}); } // Tentukan fungsi kurva gerak berdasarkan koordinat dua titik dan kelengkungan (yaitu, tentukan nilai rumus a dan b) /*: y = a*x*x + b*x + c; */ var a = params.curvature, b = 0, c = 0; // nilai bendera apakah akan melakukan gerak var flagmove = true; if (element && target && element.nodetype == 1 && target.nodetype == 1) {var rectelement = {}, rectTarget = {}; // Pindahkan posisi titik tengah elemen, posisi titik tengah elemen target var centerElement = {}, centertarget = {}; // Posisi koordinat elemen target var coordinateElement = {}, coordinatetarget = {}; // Tandai koordinat elemen saat ini ekspors.mark = function () {if (flagmove == false) kembalikan ini; if (typeOf coordinateElement.x == "tidak terdefinisi") this.position (); element.setAttribute ("Data-Center", [coordelement.x, coordinateElement.y] .join ()); target.setAttribute ("pusat data", [coordtarget.x, coordtarget.y] .join ()); kembalikan ini; } exports.position = function () {if (flagmove == false) kembalikan ini; var scrollleft = document.documentelement.scrollleft || document.body.scrollleft, scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // posisi awal if (movestyle == "margin") {element.style.marginleft = element.style.margintop = "0px"; } else {element.style [movestyle] = "translate (0, 0)"; } // Koordinat dari empat tepi rectelement = element.getBoundingClientRect (); rectTarget = target.getBoundingClientRect (); // Koordinat titik tengah dari elemen pemindahan centerElement = {x: rectelement.left + (rectelement.right - rectelement.left) / 2 + scrollleft, y: rectelement.top + (rectelement.bottom - rectelement.top) / 2 + scrolltop}; // Posisi titik tengah dari elemen target centertarget = {x: recttarget.left + (rectTarget.right - rectTarget.left) / 2 + scrollleft, y: recttarget.top + (recttarget.bottom - recttarget.top) / 2 + scrolroltop}; // Konversi ke koordelement posisi koordinat relatif = {x: 0, y: 0}; coordinatetarget = {x: -1 * (centerelement.x - centertarget.x), y: -1 * (centerElement.y - centertarget.y)}; / * * Karena setelah (0, 0), jadi c = 0 * jadi: * y = a * x * x + b * xx; * y1 = a* x1* x1 + b* x1; * y2 = a* x2* x2 + b* x2; * Gunakan koordinat kedua: * b = (y2+ a * x2 * x2) / x2 * / // jadi b = (coordtarget.y - a * coordinatetarget.x * coordtarget.x) / coordtarget.x; kembalikan ini; }; // Bergerak sesuai dengan kurva ini ekspor.move = function () {// Jika gerakan kurva belum berakhir, gerakan baru tidak akan lagi dieksekusi jika (flagmove == false) mengembalikan ini; 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 = kecepatan // (tangent*x)^2 + x*x = kecepatan // x = math.sqr (kecepatan / (tangent*tangent + 1)); startx = startx + rate * math.sqrt (params.speed / (tangent * tangent + 1)); // Cegah cross -border if ((rate == 1 && startx> coordTarget.x) || (rate == -1 && startx <coordinatetarget.x)) {startx = coordinatetarget.x; } var x = startx, y = a * x * x + b * x; // Tandai posisi saat ini, ada kecurigaan penggunaan pengujian di sini. Dalam penggunaan aktual, Anda dapat mengomentari elemen line ini.setAttribute ("Data-Center", [Math.round (x), Math.round (y)]. Join ()); // x, y saat ini adalah koordinat dan perlu dikonversi menjadi nilai piksel yang diposisikan jika (movestyle == "margin") {element.style.marginleft = x + "px"; element.style.margintop = y + "px"; } else {element.style [movestyle] = "translate (" + [x + "px", y + "px"]. gabung () + ")"; } if (startx! == coordinatetarget.x) {params.progress (x, y); window.requestanimationframe (langkah); } else {// mosi sudah berakhir, panggilan balik mengeksekusi params.complete (); flagmove = true; }}; window.requestanimationframe (langkah); flagmove = false; kembalikan ini; }; // metode inisialisasi ekspor.init = function () {this.position (). Mark (). Move (); }; } mengembalikan ekspor;};/*! requestanimationframe.js * oleh Zhangxinxu 2013-09-30 */(function () {var lasttime = 0; var vendor = ['webkit', 'moz']; untuk (var x = 0; x <vendors.length &&! window.requestanimationframe; ++ x) {vendors.length && windowframe [rusau = windowframe; ++ x) {vendors.length &&? 'RequestanimationFrame']; Date (). GetTime (); function (id) {clearTimeout (id);};menggunakan:
/ * elemen */var elemen = document.geteLementById ("elemen"), target = document.geteLementById ("target"); // tanda posisi dari elemen parabola var parabola = funparabola (elemen, target) .mark (); // pemicu parakla document.body.body.onClick = () {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) {) element.style.margintop = "0px"; parabola.init ();};Tambahkan ke keranjang belanja pertempuran aktual:
/* This demo script is based on ieBetter.js, project address: https://github.com/zhangxinxu/ieBetter.js */// Elements and some other variables var eleFlyElement = document.querySelector("#flyItem"), eleShopCart = document.querySelector("#shopCart");var numberItem = 0;// Parabola var myParabola = funparabola (eleflyelement, eleshopcart, {speed: 400, kelengkungan: 0,002, lengkap: function () {eLeFlyelement.Style.visibility = "tersembunyi"; eleshopcart.queryselector ("span"). innerhtml = +++ numberitem; if i click ("span"). eleshopcart) {[] .slice.call (document.geteLementsbyclassname ("btncart")). foreach (function (tombol) {button.addeventListener ("klik", function () {// gulir var scrollleft = document.documenten Document.documentElement.scrolltop || myparabola.position (). move ();}); });}Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.