在做購(gòu)物車的時(shí)候發(fā)現(xiàn)一個(gè)很好用拋物線特效parabola.js，可先點(diǎn)擊DEMO體驗(yàn)下。下面貼出一些關(guān)鍵代碼，具體代碼可在GitHub上查看
成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括臨桂網(wǎng)站建設(shè)、臨桂網(wǎng)站制作、臨桂網(wǎng)頁制作以及臨桂網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，臨桂網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到臨桂省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
parabola.js
重慶分公司
重慶分公司
var funParabola = function (element, target, options) {
/*
* 網(wǎng)頁模擬現(xiàn)實(shí)需要一個(gè)比例尺
* 如果按照1像素就是1米來算，顯然不合適，因?yàn)轫撁鎰?dòng)不動(dòng)就幾百像素
* 頁面上，我們放兩個(gè)物體，200~800像素之間，我們可以映射為現(xiàn)實(shí)世界的2米到8米，也就是100:1
* 不過，本方法沒有對(duì)此有所體現(xiàn)，因此不必在意
*/
var defaults = {
speed: 166.67, // 每幀移動(dòng)的像素大小，每幀（對(duì)于大部分顯示屏）大約16~17毫秒
curvature: 0.001, // 實(shí)際指焦點(diǎn)到準(zhǔn)線的距離，你可以抽象成曲率，這里模擬扔物體的拋物線，因此是開口向下的
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;
}
};
/* 確定移動(dòng)的方式
* 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;
}
});
}
// 根據(jù)兩點(diǎn)坐標(biāo)以及曲率確定運(yùn)動(dòng)曲線函數(shù)（也就是確定a, b的值）
/* 公式： y = a*x*x + b*x + c;
*/
var a = params.curvature, b = 0, c = 0;
// 是否執(zhí)行運(yùn)動(dòng)的標(biāo)志量
var flagMove = true;
if (element && target && element.nodeType == 1 && target.nodeType == 1) {
var rectElement = {}, rectTarget = {};
// 移動(dòng)元素的中心點(diǎn)位置，目標(biāo)元素的中心點(diǎn)位置
var centerElement = {}, centerTarget = {};
// 目標(biāo)元素的坐標(biāo)位置
var coordElement = {}, coordTarget = {};
// 標(biāo)注當(dāng)前元素的坐標(biāo)
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)";
}
// 四邊緣的坐標(biāo)
rectElement = element.getBoundingClientRect();
rectTarget = target.getBoundingClientRect();
// 移動(dòng)元素的中心點(diǎn)坐標(biāo)
centerElement = {
x: rectElement.left + (rectElement.right - rectElement.left) / 2 + scrollLeft,
y: rectElement.top + (rectElement.bottom - rectElement.top) / 2 + scrollTop
};
// 目標(biāo)元素的中心點(diǎn)位置
centerTarget = {
x: rectTarget.left + (rectTarget.right - rectTarget.left) / 2 + scrollLeft,
y: rectTarget.top + (rectTarget.bottom - rectTarget.top) / 2 + scrollTop
};
// 轉(zhuǎn)換成相對(duì)坐標(biāo)位置
coordElement = {
x: 0,
y: 0
};
coordTarget = {
x: -1 * (centerElement.x - centerTarget.x),
y: -1 * (centerElement.y - centerTarget.y)
};
/*
* 因?yàn)榻?jīng)過(0, 0), 因此c = 0
* 于是：
* y = a * x*x + b*x;
* y1 = a * x1*x1 + b*x1;
* y2 = a * x2*x2 + b*x2;
* 利用第二個(gè)坐標(biāo)：
* b = (y2+ a*x2*x2) / x2
*/
// 于是
b = (coordTarget.y - a * coordTarget.x * coordTarget.x) / coordTarget.x;
return this;
};
// 按照這個(gè)曲線運(yùn)動(dòng)
exports.move = function () {
// 如果曲線運(yùn)動(dòng)還沒有結(jié)束，不再執(zhí)行新的運(yùn)動(dòng)
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;
// 標(biāo)記當(dāng)前位置，這里有測(cè)試使用的嫌疑，實(shí)際使用可以將這一行注釋
element.setAttribute("data-center", [Math.round(x), Math.round(y)].join());
// x, y目前是坐標(biāo)，需要轉(zhuǎn)換成定位的像素值
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 {
// 運(yùn)動(dòng)結(jié)束，回調(diào)執(zhí)行
params.complete();
flagMove = true;
}
};
window.requestAnimationFrame(step);
flagMove = false;
return this;
};
// 初始化方法
exports.init = function () {
this.position().mark().move();
};
}
return exports;
};
實(shí)現(xiàn)
// body點(diǎn)擊加入購(gòu)物車查看效果 0
// script
// 起始位置元素
var imgElement = document.querySelector('#imgElement'),
// 終點(diǎn)位置元素
shopCartElement = document.querySelector('#shopCart'),
// 購(gòu)物車數(shù)量
proNum = 0;
// 初始化拋物線動(dòng)畫
var myParabola = funParabola(imgElement, shopCartElement, {
speed: 100,// 每幀移動(dòng)的像素大小
curvature: 0.005,// 實(shí)際指焦點(diǎn)到準(zhǔn)線的距離
complete: function () {
imgElement.style.visibility = "hidden";
$('.shop-cart-num').text(++proNum);
}
});
// 綁定加入購(gòu)物車事件
$('.add-shop-cart').click(function () {
// 重置位置
$('#imgElement').css({ left: '70px', bottom: '25px', visibility: 'visible' });
myParabola.position().move();
});
效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
