评论：仿淘宝点击飞入右侧贴边购物车导航栏  [查看原文]

特效使用方法：

js部分：

// 元素以及其他一些变量
var eleFlyElement = document.querySelector("#flyItem"), eleShopCart = document.querySelector("#shopCart");
var numberItem = 0;
// 抛物线运动
var myParabola = funParabola(eleFlyElement, eleShopCart, {
	speed: 400, //抛物线速度
	curvature: 0.0008, //控制抛物线弧度
	complete: function() {
		eleFlyElement.style.visibility = "hidden";
		eleShopCart.querySelector("span").innerHTML = ++numberItem;
		// 此处可进行进一步扩展
		// 当漂浮物完成时进行数据的其他操作
	}
});
// 绑定点击事件
if (eleFlyElement && eleShopCart) {
	[].slice.call(document.getElementsByClassName("btnCart")).forEach(function(button) {
		button.addEventListener("click", function(event) {
			// 滚动大小
			var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
				scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;
			eleFlyElement.style.left = event.clientX + scrollLeft + "px";
			eleFlyElement.style.top = event.clientY + scrollTop + "px";
			eleFlyElement.style.visibility = "visible";
			
			// 需要重定位
			myParabola.position().move();			
		});
	});
}

注意：

#flyItem  // 是飘动物体的对象

#shopCart  // 是飘动物体要到达位置对象，子级要包含一个span元素用来展示数量变化

.btnCart  // 是触发飘动物体的对象