发新贴  快速回复

如何用原生js 写出这种 天猫的抛物线效果

Surface
2014-12-05 15:50
如何  如何用原生js 写出这种 天猫的抛物线效果   有弧线的效果 ,求大神指教
ghostdp
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:500px;}
</style>
<script>
window.err= = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');
    
    var timer = null;
    var iSpeed = -40;
    var iSpeedX = 10;
    
    oInput.err= = function(){
        startMove();
    };
    
    function startMove(){
        clearInterval(timer);
        timer = setInterval(function(){
            
            iSpeed += 3;
            
            var T = oDiv.offsetTop + iSpeed;
            
            if(T > document.documentElement.clientHeight - oDiv.offsetHeight){
                T = document.documentElement.clientHeight - oDiv.offsetHeight;
                iSpeed *= -1;
                
                iSpeed *= 0.75;
                
                iSpeedX *= 0.75;
                
            }
            
            oDiv.style.top = T + 'px';
            
            oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
            
        },30);
    }
    
};
</script>
</head>

<body>
<input type="button" value="开始运动" id="input1">
<div id="div1"></div>
</body>
</html>
抛物线就是有一个重力在里面,当top向上的时候,给一个向下的作用,就可实现效果

2014-12-05 16:51  回复本帖
创美易-miaov
 本帖最后由 创美易-miaov 于 2014-12-5 18:11 编辑 

forum.php?mod=redirect&goto=findpost&pid=33304&ptid=10676
抛物线就是有一个重力在里面,当top向上的时候,给一个向下的作用,就可实现效果

 ...
噢知道了, 这个讲过,老官网的例子. 现在想起来了.
2014-12-05 17:45  回复本帖
Surface
forum.php?mod=redirect&goto=findpost&pid=33304&ptid=10676
抛物线就是有一个重力在里面,当top向上的时候,给一个向下的作用,就可实现效果

 ...

主要 是 y轴  不知道怎么处理  ,有些 用  Math.sin(n)  我在想 怎样用到  sin  或者 y=ax*x+bx+c   抛物线函数!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box { width:400px; height:400px; position:relative; margin:200px auto; border:1px solid #000;}
.haha { background:red; width:2px; height:2px; position:absolute; top:0; left:0;}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var outer = document.getElementById('box');
var timer = null;
var l = 200;
var t = 30;
var n = 6.2;
timer = setInterval(function(){
    if(n < 0) clearInterval(timer);
    var oDiv = document.createElement('div');
    oDiv.className = 'haha';
    outer.appendChild(oDiv);
    var x = Math.sin(n);
    var y = Math.cos(n);
    oDiv.style.left = l*x + 'px';
    oDiv.style.top = t*y + 'px';
    n-= 0.05;
},10);
</script>aaaaaaaaaaaaaaaaaaaaaaaAAAAZZQSZ;
</body>
</html>
2014-12-05 18:04  回复本帖
创美易-miaov
forum.php?mod=redirect&goto=findpost&pid=33304&ptid=10676
抛物线就是有一个重力在里面,当top向上的时候,给一个向下的作用,就可实现效果

 ...
噢知道了, 这个讲过,老官网的例子. 现在想起来了. 如果指定某种曲线轨迹运动呢? 下面这种 ,求解



2014-12-05 18:10  回复本帖
ghostdp
forum.php?mod=redirect&goto=findpost&pid=33311&ptid=10676
主要 是 y轴  不知道怎么处理  ,有些 用  Math.sin(n)  我在想 怎样用到  sin  或者 y=ax*x ...

这属于三角函数图像的方法,可以参看:《三角函数视频》里面有介绍图像是怎么画出来的,看完你就懂了
2014-12-06 11:28  回复本帖
ghostdp
forum.php?mod=redirect&goto=findpost&pid=33312&ptid=10676
噢知道了, 这个讲过,老官网的例子. 现在想起来了. 如果指定某种曲线轨迹运动呢? 下面这种 ,求解




这个可以用圆周运动然后不断地改变半径来实现,半径的改变可以参考:斐波那契螺旋线(也就是黄金分割法:1 1 2 3 5 8的方式改变半径)效果会好一些,

对了旋转角度为90度改变下半径大小

2014-12-06 11:42  回复本帖
创美易-miaov
forum.php?mod=redirect&goto=findpost&pid=33341&ptid=10676
这个可以用圆周运动然后不断地改变半径来实现,半径的改变可以参考:斐波那契螺旋线(也就是黄金分割法: ...

谢谢钟哥,我去研究一下。
2014-12-06 16:06  回复本帖
无为
forum.php?mod=redirect&goto=findpost&pid=33344&ptid=10676
谢谢钟哥,我去研究一下。

那是杜杜。。。
2014-12-08 00:22  回复本帖
创美易-miaov
forum.php?mod=redirect&goto=findpost&pid=33393&ptid=10676
那是杜杜。。。

{:soso_e100:}好的
2014-12-08 01:07  回复本帖
登录 后才可以发表回复