html5中购物车的原理,html5实现购物车抛物线

实现原理

1.利用运动的合成原理，在水平方向上，执行匀速运动，在竖直方向上执行匀变速运动，合成后的物体运动轨迹便是抛物线。

2.需要使用两个标签，一个父标签，一个子标签，运动曲线分别绑定在对应的两个标签上。

3.确定起始位置和结束位置点。

css样式

.parent{

position:absolute;

z-index:10;

-webkit-transition:all 0.5s cubic-bezier( 0.39,-0.4,0.5,0 ) 0s; // 可以自定义

}

.child{

width:20px;

height:20px;

border-radius:50%;

background-color:#f9b52c;

-webkit-transition:all 0.5s linear 0s; // 可以自定义

}

js代码段

var curveMove = function ( node ){ // node 为点击的节点

var

xStar = node.offset().left + node.width() / 2, // 获取起始点横坐标

yStar = node.offset().top - node.height() / 2, // 获取起始点纵坐标

width = 20,height = 20,

nodeOffset = $('.aim').offset(), // 购物车偏移量

xEnd = nodeOffset.left + width / 2, // 结束点横坐标

yEnd = nodeOffset.top + height / 2; // 结束点纵坐标

$('

var

outer = $('.parent').last().css({ left : xStar, top : yStar }),

inner = outer.children();

setTimeout(function(){ // 延时一下，避免 transition 不执行

outer[0].style.transform = 'translate3d(0,' + ( yEnd - yStar )+ 'px,0)';

inner[0].style.transform = 'translate3d(' + ( xEnd - xStar ) + 'px,0,0)';

},30);

};

最后将已经结束的动画节点清除，这里用到了 transitionEnd 监听事件，代码如下：

document.addEventListener("webkitTransitionEnd", function( e ){

// 监听动画是否执行完，若执行完则清除相应的节点，

var node = $(e.target).remove();

node = null; // 待系统回收

});