html5实现了购物车的抛物线

时间：2023-04-05 18:26:02 HTML5

实现原理利用运动合成原理，在水平方向做匀速运动，在垂直方向做匀速运动。合成物体的轨迹是一条抛物线。需要使用两个标签，一个父标签，一个子标签，将运动曲线分别绑定到对应的两个标签上。确定起点和终点位置。CSSstyle.parent{位置：绝对；z-指数：10；-webkit-transition:all0.5scubic-bezier(0.39,-0.4,0.5,0)0s;//可以自定义}.child{width:20px;高度：20px；边界半径：50%；背景颜色：#f9b52c；-webkit-transition:all0.5slinear0s;//可自定义}js代码段varcurveMove=function(node){//node为点击的节点varxStar=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;//终点纵坐标$('

').appendTo('body');varouter=$('.parent').last().css({left:xStar,top:yStar}),inner=outer.children();setTimeout(function(){//延迟，避免过渡不执行outer[0].style.transform='translate3d(0,'+(yEnd-yStar)+'px,0)';inner[0].style.transform='translate3d('+(xEnd-xStar)+'px,0,0)';},30);};//finallytransform已经结束的动画节点被清空。这里使用了transitionEnd监听器事件。代码如下：document.addEventListener("webkitTransitionEnd",function(e){//监听动画是否播放完毕，播放完毕则清空对应节点，varnode=$(e.target).remove();node=null;//被系统回收});