parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼
更新時(shí)間：2017年10月25日 11:17:28 作者：chenwenjin
本篇文章主要介紹了parabola.js拋物線與加入購(gòu)物車(chē)效果的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在做購(gòu)物車(chē)的時(shí)候發(fā)現(xiàn)一個(gè)很好用拋物線特效parabola.js，可先點(diǎn)擊DEMO體驗(yàn)下。下面貼出一些關(guān)鍵代碼，具體代碼可在GitHub上查看
parabola.js
var funParabola = function (element, target, options) {
/*
* 網(wǎng)頁(yè)模擬現(xiàn)實(shí)需要一個(gè)比例尺
* 如果按照1像素就是1米來(lái)算，顯然不合適，因?yàn)轫?yè)面動(dòng)不動(dòng)就幾百像素
* 頁(yè)面上，我們放兩個(gè)物體，200~800像素之間，我們可以映射為現(xiàn)實(shí)世界的2米到8米，也就是100:1
* 不過(guò)，本方法沒(méi)有對(duì)此有所體現(xiàn)，因此不必在意
*/
var defaults = {
speed: 166.67, // 每幀移動(dòng)的像素大小，每幀（對(duì)于大部分顯示屏）大約16~17毫秒
curvature: 0.001, // 實(shí)際指焦點(diǎn)到準(zhǔn)線的距離，你可以抽象成曲率，這里模擬扔物體的拋物線，因此是開(kāi)口向下的
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)過(guò)(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)還沒(méi)有結(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));
// 防止過(guò)界
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
<div class="container">
<center>點(diǎn)擊加入購(gòu)物車(chē)查看效果</center>
<!--動(dòng)畫(huà)圖片-->
<div class="img-element" id="imgElement">
</div>
<!--購(gòu)物車(chē)-->
<div class="shop-cart" id="shopCart"></div>
<span class="shop-cart-num">0</span>
<div class="add-shop-cart"><!--加入購(gòu)物車(chē)--></div>
</div>
// script
// 起始位置元素
var imgElement = document.querySelector('#imgElement'),
// 終點(diǎn)位置元素
shopCartElement = document.querySelector('#shopCart'),
// 購(gòu)物車(chē)數(shù)量
proNum = 0;
// 初始化拋物線動(dòng)畫(huà)
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)物車(chē)事件
$('.add-shop-cart').click(function () {
// 重置位置
$('#imgElement').css({ left: '70px', bottom: '25px', visibility: 'visible' });
myParabola.position().move();
});
效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript操作DOM常用的API小結(jié)
DOM（Document Object Model）即文檔對(duì)象模型，針對(duì) HTML 和 XML 文檔的 API（應(yīng)用程序接口）。本篇文章給大家介紹javascript操作dom常用的api小結(jié)，對(duì)javascript dom api相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
微信公眾號(hào)獲取用戶(hù)地理位置并列出附近的門(mén)店的示例代碼
這篇文章主要介紹了微信公眾號(hào)獲取用戶(hù)地理位置并列出附近的門(mén)店的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了4個(gè)值得收藏的Javascript技巧，文章首先通過(guò)變量轉(zhuǎn)字符串展開(kāi)主題詳情，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了JS瀏覽器BOM常見(jiàn)操作,結(jié)合實(shí)例形式詳細(xì)分析了JS瀏覽器BOM模型元素常見(jiàn)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要為大家介紹了webpack打包的3種hash值詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07 
js在客戶(hù)端驗(yàn)證密碼強(qiáng)度，兼容FireFox和IE
js在客戶(hù)端驗(yàn)證密碼強(qiáng)度，兼容FireFox和IE...
2007-05-05 
javascript Array對(duì)象使用小結(jié)
數(shù)組是一段線性分配的內(nèi)存，它通過(guò)整數(shù)去計(jì)算偏移并訪問(wèn)其中的元素。數(shù)組是很快的數(shù)據(jù)結(jié)構(gòu)，但不幸的是，Javascript并沒(méi)有像這種數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)。
2009-12-12 
DOM操作原生js 的bug,使用jQuery 可以消除的解決方法
下面小編就為大家?guī)?lái)一篇DOM操作原生js 的bug,使用jQuery 可以消除的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09 
這篇文章主要介紹了淺談目前可以使用ES10的5個(gè)新特性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-06-06