脚本宝典收集整理的这篇文章主要介绍了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; // 结束点纵坐标
$('<div class="parent"><div class="child"></div></div>').appendTo('body');
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; // 待系统回收
});
以上是脚本宝典为你收集整理的html5实现购物车抛物线全部内容,希望文章能够帮你解决html5实现购物车抛物线所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。