码迷,mamicode.com
首页 > 其他好文 > 详细

购物车 抛物线

时间:2017-01-11 14:05:25      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:color   scale   event   offset   按钮   var   form   orm   create   

代码

$(".cart-increase")是添加按钮  
domShopCart 购物车dom
 
function bindEvent(){
        $(".cart-increase").on("click",function(){
            var __this = $(this);
            var nStartX = __this.offset().left,
                    nStartY = __this.offset().top,
                    nEndX = domShopCart.offset().left + domShopCart[0].offsetWidth/2,
                    nEndY = domShopCart.offset().top,
                    nTopX = nEndX - 10,
                    nTopY = nEndY - 8;
            var x = nStartX,y = nStartY;
            //新建一个内容
            var domGood = document.createElement(‘div‘);
            domGood.style.width = ‘0.28rem‘;
            domGood.style.height = ‘0.28rem‘;
            domGood.style.background = ‘#75d8bc‘;
            domGood.style.borderRadius = ‘50%‘;
            domGood.style.position = ‘absolute‘;
            domGood.style.left = nStartX + ‘px‘;
            domGood.style.top = nStartY + ‘px‘;
            document.body.appendChild(domGood);

            var a = -((nStartY - nEndY) * (nStartX - nTopX) - (nStartY - nTopY) * (nStartX - nEndX)) / ((nStartX * nStartX - nEndX * nEndX) * (nStartX - nTopX) - (nStartX * nStartX - nTopX * nTopX) * (nStartX - nEndX));
            var b = ((nEndY - nStartY) - a * (nEndX * nEndX - nStartX * nStartX)) / (nEndX - nStartX);
            var c = nStartY - a * nStartX * nStartX - b * nStartX;
            var timer = setInterval(function () {
                /*y = a * x*x + b*x +c;*/
                if (x > nEndX) {
                    x = x - 10;
                    y = a * x * x + b * x + c;
                    domGood.style.left = x + ‘px‘;
                    domGood.style.top = y + ‘px‘;
                }else {
                    domGood.parentNode.removeChild(domGood);
                    clearInterval(timer);
                    var ele = domShopCart[0];
                    domShopCart.css({"transform":"scale(1.2)"});
                    setTimeout(function(){
                        domShopCart.css({"transform":"scale(1)"});
                    },100)
                }
            }, 20);

        });
    }

 

购物车 抛物线

标签:color   scale   event   offset   按钮   var   form   orm   create   

原文地址:http://www.cnblogs.com/juexin/p/6273194.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!