html5实现购物车抛物线

widuu 发布于2019-08-21 11:48 / 2040人阅读

摘要：实现原理利用运动的合成原理，在水平方向上，执行匀速运动，在竖直方向上执行匀变速运动，合成后的物体运动轨迹便是抛物线。需要使用两个标签，一个父标签，一个子标签，运动曲线分别绑定在对应的两个标签上。确定起始位置和结束位置点。

实现原理

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; // 结束点纵坐标
    $("").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; // 待系统回收
    });

云服务器 GPU云服务器 HTML5实现购物车 js 抛物线购物车实现购物车功能 html5购物车原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87128.html

实现加入购物车抛物线效果

写在前面最近天气刚刚转热，心想应该淘点春装卖卖骚了，然后某宝逛的时候发现其加入购物车的动画效果不错，既完善了交互，又有功能导向作用，用户体验杠杠滴～作为一名前端汪，也想自己动手实现下此类酷炫的效果。抽空写了个demo，虽然完成的效果比较粗糙，但是拥有毛坯房总好过租房吧哈哈，日后再完善不迟。现在讲讲自己的经验，顺便理理思路，加深印象：）准备开始开始只是在纸上作了草图，构思了下，才发现如果要一步...

yunhao 2019-08-20 14:51 评论0 收藏0
实现加入购物车抛物线效果

写在前面最近天气刚刚转热，心想应该淘点春装卖卖骚了，然后某宝逛的时候发现其加入购物车的动画效果不错，既完善了交互，又有功能导向作用，用户体验杠杠滴～作为一名前端汪，也想自己动手实现下此类酷炫的效果。抽空写了个demo，虽然完成的效果比较粗糙，但是拥有毛坯房总好过租房吧哈哈，日后再完善不迟。现在讲讲自己的经验，顺便理理思路，加深印象：）准备开始开始只是在纸上作了草图，构思了下，才发现如果要一步...

xiguadada 2019-08-30 15:53 评论0 收藏0
JS 实现抛物线动画

摘要：陈家宾在做小程序的项目中，需要在添加购物车的时候，增加抛物线小球动画。 author: 陈家宾 email: 617822642@qq.com date: 2018/2/24 在做小程序的项目中，需要在添加购物车的时候，增加抛物线小球动画。先给大家看下效果图（其实已经是实现后的效果了，顺便给自己公司打广告了哈哈） showImg(https://segmentfault.com/im...

zollero 2019-08-26 17:15 评论0 收藏0
Javascript中的抛物线 ~ 加入购物车小动画

摘要：上图即为归零后的坐标系，对称轴直线为在抛物线方程中，值得正负代表着抛物线的开口方向，那么值的绝对值也和抛物线的开口大小有着反比例的关系。废话不多说,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源码~https://github.com/Nelson2016... 运行的原理很简单的一个小特效，接下来来说一下他的原理。显而易见，这小东西肯定和抛物...

sarva 2019-08-29 11:09 评论0 收藏0