天猫加入购物车效果(抛物线问题)

最新推荐文章于 2019-06-08 21:41:11 发布

vcxiaohan2

最新推荐文章于 2019-06-08 21:41:11 发布

阅读量1.1k

点赞数 1

分类专栏： javascript实例

本文链接：https://blog.csdn.net/u011500781/article/details/51416064

版权

javascript实例专栏收录该内容

12 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ curve示例

对Math方法不了解的请看另一篇博客：

http://blog.csdn.net/u011500781/article/details/51407593

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="js/jquery-1.11.3.min.js"></script>

    <style>
        * {margin: 0; padding: 0;}
        body, html {width: 100%; height: 100%;}
        div {display: inline-block; outline: 1px solid blue;}
        .start {position: absolute; top: 300px; left: 50px;}
        .end {position: absolute; top: 50px; left: 1000px;}
    </style>
</head>
<body>
    <div class="start">开始</div>
    <div class="end">结束</div>
    <input type="text" value="0.002">

    <script>
    $(function() {
        $('body').on('click', function(e) {
            $('.start:not(:first)').remove();
            var $endPos = $('.end').position();

            var startLeft = e.clientX,
                startTop = e.clientY,
                endLeft = $endPos.left,
                endTop = $endPos.top;

            var a = +$('input').val();
            var x = startLeft;
            var y = 0;

            b = (startTop-endTop-a*startLeft*startLeft+a*endLeft*endLeft)/(startLeft-endLeft);

            c = endTop-a*endLeft*endLeft-b*endLeft;
            console.log('y=('+a+'*x*x)+('+b+'*x)+('+c+')');

            var timer = setInterval(function() {
                x += 10;
                if(x == endLeft) {
                    clearInterval(timer);
                }
                var $div = $('.start:last').clone().appendTo('body');
                y = a*x*x+b*x+c;
                $div.css({
                    'left': x,
                    'top': y,
                });
            }, 20);

        });




    })
        
    </script>
</body>
</html>

vcxiaohan2

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
天猫加入购物车效果(抛物线问题)

对Math方法不了解的请看另一篇博客：http://blog.csdn.net/u011500781/article/details/51407593 test * {margin: 0; padding: 0;} div {display: inline-block; outline: 1px solid b
复制链接

扫一扫