js抛物线

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap {
            position: relative;
            width: 1000px;
            height: 550px;
            margin: 0 auto;
            border: 1px solid #ccc;
            margin-top: 50px;
        }
        #fall {
            width: 20px;
            font-size: 1px;
            height: 20px;
            background: #000;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<input type="button" value="演示" onclick="demo()">;
<div class="wrap">
    <div id="fall">o</div>
</div>
<script>
    function demo() {
        var x, y, a,t;
        x=2;
        y=-2;
        a=0.0098;
        t=10;
        var f=document.getElementById(‘fall‘);
        var Vx=parseInt(x),
                Vy=parseInt(y),
                g=a,
                t=parseInt(t),
                h=0,l=0,Sx=0,Sy=0;
        var i=setInterval(function(){
            if(f){
                Sx+=Vx*t;
                l=Sx;
                Vy+=g*t;
                h+=Vy*t;
                f.style.left=l+‘px‘;
                f.style.top=h+‘px‘;
                if(h>500||l>900)clearInterval(i);
            }
        },t);
    }
//  demo(2,-2,0.0098,10);

</script>
</body>
</html>

  

时间: 2024-11-05 11:27:19

js抛物线的相关文章

js 抛物线、随机颜色

div:nth-of-type(1){ width: 600px; height: 2px; background: #000; position: absolute; top: 300px; } div:nth-of-type(2){ width: 2px; height: 600px; background: #000; position: absolute; left: 300px; } span{ display: block; position: absolute; width:2px

js加入购物车抛物线动画

天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着抛物线本质上就是向右和向上方向各有一个速度(就上面的demo而言),向右的速度匀速,向上的速度递减,减到0后再反方向递增,元素的left和top值随时间递增而改变,元素运动轨迹就是抛物线,这个思路不具备通用性,实现也比较复杂,放弃了. 之后参考了张鑫旭用抛物线函数的实现方式和愚人码头的改进,豁然开朗

js加入购物车特效

本文来源:  http://www.zhangxinxu.com/study/201312/js-parabola-shopping.html parabola.js /*! * by zhangxinxu(.com) 2012-12-27 * you can visit http://www.zhangxinxu.com/wordpress/?p=3855 to get more infomation * under MIT license */ var funParabola = funct

clips 前端 js 动画 抛物线加入购物车

抛物线加入购物车的特效动画(支持ie7以上,移动端表现良好)    1.引用一个极小的jquery插件库    2.启动 设置 起点 终点 和完成后回调函数 1.插件地址 git-hub上的官方主页 https://github.com/amibug/fly 引入具体文件: (function () { var lastTime = 0; var vendors = ['webkit', 'moz']; for (var x = 0; x < vendors.length && !w

js实现一条抛物线

抛物线运动解释: 以右开口为例,根据公式  y^2 = 2px .确定p的值,已知x求y. <!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body style="width:100%; min-width:600px; height:100%; min-height:500px;&quo

jQuery.fly插件实现添加购物车抛物线效果

样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始位置创建一个 document 对象,作为红色小球: 通过 jQuery.fly 插件提供的fly函数来移动小球,移动至终止位置: 当小球到达终止位置后,通过fly插件提供的 onEnd 回调函数,将小球销毁: Demo 源码: <!DOCTYPE html> <html lang=&quo

CSS3动画-抛物线

CSS3动画之抛物线 今天来说下CSS3动画,目标是让一个方块做抛物线运动.主要用到的CSS3属性有animation,transform,@keyframes,transition等. Animation版-0 我们先建立一个HTML文件,test.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="an

vue.js加入购物车小球动画

http://www.cnblogs.com/yuxingyoucan/p/7063881.html 生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小球的轨道和方向,内层控制动画小球的运行状态 动画使用vue的js钩子实现 因为小球动画只有一个方向(只执行单方向从上到下滚落),所以只用了before-enter,enter,after-enter

js第三方库CreateJs的使用

学习一下使用第三方js库 createjs ,官网  分开了好几个不同用途的js库: EASELJS ,TWEENJS,SOUNDJS,PRELOADJS 同时也还有很多例子可以参考 下面使用easeljs这个库 EASELJS:A Javascript library that makes working with the HTML5 Canvas element easy. 使用这个库可以更加方便HTML5的canvas元素 使用canvas绘图,可以做出我们想要的各种图形 1 /** 2