运动--扩展

弹性运动

l加减速运动

<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeed=0;

function startMove()
{
    var oDiv=document.getElementById(‘div1‘);
    //开启循环
    setInterval(function (){
                 //速度加1
        iSpeed++;

        oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>

quickened

<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeed=20;

function startMove()
{
    var oDiv=document.getElementById(‘div1‘);

    setInterval(function (){
        iSpeed--;

        oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
</body>
</html>

slowdown

•速度不断增加或减少

•速度减小到负值，会向反方向运动

l弹性运动

<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeed=0;

function startMove()
{
    var oDiv=document.getElementById(‘div1‘);

    setInterval(function (){
        if(oDiv.offsetLeft<300)
        {
            iSpeed++;
        }
        else
        {
            iSpeed--;
        }

        oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
<div style="position:absolute; width:1px; height:300px; left:300px; top:0; background:black;">
</div>
</body>
</html>

elastic

<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeed=0;

function startMove()
{
    var oDiv=document.getElementById(‘div1‘);

    setInterval(function (){
        if(oDiv.offsetLeft<300)
        {
            iSpeed+=(300-oDiv.offsetLeft)/50;
        }
        else
        {
            iSpeed-=(oDiv.offsetLeft-300)/50;
        }

        oDiv.style.left=oDiv.offsetLeft+iSpeed+‘px‘;
    }, 30);
}
</script>
</head>

elastic tow

•在目标点左边，加速；在目标点右边，减速

•根据距离，计算加速度

l摩擦力

•速度不断减小

l带摩擦力的弹性运动

•弹性运动+摩擦力

l弹性公式

•速度+=(目标值-oDiv.offsetLeft)/5

•速度*=0.7

l例子

•仿官网导航条效果

–无法到达指定位置——小数误差问题

–如何解决？速度无法取整，使用变态办法——变量

鼠标移动到哪里，红色小框滑动到那里！

<!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>
* { padding: 0; margin: 0; }
li { list-style: none; }

ul { width: 400px; height: 30px; position: relative; margin: 100px auto 0; }
li { float: left; width: 98px; height: 28px; line-height: 28px; border: 1px solid #ccc; text-align: center; z-index: 2; position: relative; cursor: pointer; }
.bg { width: 100px; height: 5px; overflow: hidden; background: red; border: none; position: absolute; top: 24px; left: 0; z-index: 1; }
</style>
<script>
window.onload=function()
{
    var oUl=document.getElementById(‘ul1‘);
    var aLi=oUl.getElementsByTagName(‘li‘);
    var oBg=aLi[aLi.length-1];
    var i=0;

    for(i=0; i<aLi.length-1; i++)
    {   //获取抚摸的li
        aLi[i].onmouseover=function()
        {   //运动函数
            startMove(oBg, this.offsetLeft);
            }
        }
    };
var iSpeed=0;
var left=0;
function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        //速度越来越小
            iSpeed+=(iTarget-obj.offsetLeft)/5;
            iSpeed*=0.7;

            left+=iSpeed;
            //运行速度小于1并且 left离obj.offsetLeft相差1
        if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1)
        {
            clearInterval(obj.timer);
            obj.style.left=iTarget+‘px‘;
            }
        else{obj.style.left=left+‘px‘;}

        document.title=iSpeed;
        },30);
    }
</script>
</head>

<body><ul id="ul1">
    <li>首页</li>
    <li>关于我们</li>
    <li>产品</li>
    <li>联系方式</li>
    <li class="bg"></li>
</ul>
</body>
</html>

slip

•弹性菜单

–弹性运动的问题：运动过界

<!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>
#div1 {width:100px; height:20px; background:red;}
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById(‘div1‘);
    oDiv.onmouseover=function()
    {startMove(oDiv, 200);};
    oDiv.onmouseout=function()
    {startMove(oDiv, 20);};
    };
var iSpeed=0;
var height=20;
function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        //算速度  累加/5赋予ispeed
         iSpeed+=(iTarget-height)/5;
         iSpeed*=0.7;

         if(Math.abs(iSpeed)<1 && Math.abs(iTarget-height)<1)
         {
            clearInterval(obj.timer);
            obj.style.height=iTarget+‘px‘;
             }
         else
         {
               height+=iSpeed;
               if(height<0)
               {
                   height=0;
                   }
                obj.style.height=height+‘px‘;
             }
        },30);
    }
</script>
</head>

<body><div id="div1">
</div>
</body>
</html>

slip bug

碰撞运动

•撞到目标点，速度反转

<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeedX=6;
var iSpeedY=8;

function startMove()
{
    setInterval(function (){
        var oDiv=document.getElementById(‘div1‘);

        iSpeedY+=3;

        var l=oDiv.offsetLeft+iSpeedX;
        var t=oDiv.offsetTop+iSpeedY;

        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            iSpeedY*=-1;
            t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
        else if(t<=0)
        {
            iSpeedY*=-1;
            t=0;
        }

        if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
        {
            iSpeedX*=-1;
            l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        else if(l<=0)
        {
            iSpeedX*=-1;
            l=0;
        }

        oDiv.style.left=l+‘px‘;
        oDiv.style.top=t+‘px‘;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>

impact

•无重力的漂浮Div

–速度反转

–滚动条闪烁的问题

»过界后直接拉回来

l加入重力

•反转速度的同时，减小速度

•纵向碰撞，横向速度也减小

•横向速度小数问题（负数）

<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeedX=1000;
var iSpeedY=0;

function startMove()
{
    setInterval(function (){
        var oDiv=document.getElementById(‘div1‘);

        iSpeedY+=3;
        //左浮动距离
        var l=oDiv.offsetLeft+iSpeedX;
        //上浮动距离
        var t=oDiv.offsetTop+iSpeedY;

        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            iSpeedY*=-0.8;
            iSpeedX*=0.8;
            t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
        else if(t<=0)
        {
            iSpeedY*=-1;
            iSpeedX*=0.8;
            t=0;
        }

        if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
        {
            iSpeedX*=-0.8;
            l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        else if(l<=0)
        {
            iSpeedX*=-0.8;
            l=0;
        }

        if(Math.abs(iSpeedX)<1)
        {
            iSpeedX=0;
        }

        if(Math.abs(iSpeedY)<1)
        {
            iSpeedY=0;
        }

        oDiv.style.left=l+‘px‘;
        oDiv.style.top=t+‘px‘;

        document.title=iSpeedX;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>

impact3

l鼠标拖拽

•两点间距离求出速度

l运动终止条件

•弹性运动：距离足够近并且速度足够小

•碰撞运动：距离足够近并且速度足够小

<!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>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);

    var lastX=0;
    var lastY=0;

    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;

        var disX=oEvent.clientX-oDiv.offsetLeft;
        var disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;

            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;

            oDiv.style.left=l+‘px‘;
            oDiv.style.top=t+‘px‘;

            iSpeedX=l-lastX;
            iSpeedY=t-lastY;

            lastX=l;
            lastY=t;

            document.title=‘x:‘+iSpeedX+‘, y:‘+iSpeedY;
        };

        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;

            startMove();
        };

        clearInterval(timer);
    };
};

var timer=null;

var iSpeedX=0;
var iSpeedY=0;

function startMove()
{
    clearInterval(timer);

    timer=setInterval(function (){
        var oDiv=document.getElementById(‘div1‘);

        iSpeedY+=3;

        var l=oDiv.offsetLeft+iSpeedX;
        var t=oDiv.offsetTop+iSpeedY;

        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            iSpeedY*=-0.8;
            iSpeedX*=0.8;
            t=document.documentElement.clientHeight-oDiv.offsetHeight;
        }
        else if(t<=0)
        {
            iSpeedY*=-1;
            iSpeedX*=0.8;
            t=0;
        }

        if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
        {
            iSpeedX*=-0.8;
            l=document.documentElement.clientWidth-oDiv.offsetWidth;
        }
        else if(l<=0)
        {
            iSpeedX*=-0.8;
            l=0;
        }

        if(Math.abs(iSpeedX)<1)
        {
            iSpeedX=0;
        }

        if(Math.abs(iSpeedY)<1)
        {
            iSpeedY=0;
        }

        if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            clearInterval(timer);
            alert(‘停止‘);
        }
        else
        {
            oDiv.style.left=l+‘px‘;
            oDiv.style.top=t+‘px‘;
        }

        document.title=iSpeedX;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>

拖拽+碰撞+重力

知识点

l弹性运动

l用变量存储位置

l碰撞运动

l拖拽求速度

时间： 2024-10-07 10:58:33

运动--扩展的相关文章

合金装备V 幻痛制作技术特辑

合金装备V:幻痛制作特辑资料原文出自日版CGWORLD2015年10月号在[合金装备4(Metal Gear Solid IV)]7年后,序章作品[合金装备5 :原爆点 (Metal Gear Solid V: Ground Zeroes)]1年半后,合金装备(MGS)系列的最新作[合金装备5 幻痛(METAL GEAR SOLID V: THE PHANTOM PAIN)]发售了.游戏上做最新的挑战,一直走在这个时代的游戏图形最前端的开发团队,在本作中是以什么为目标,为了这个目标加入了何

《编程之美》3.6判断链表是否相交之扩展：链表找环方法证明

先看看原题:<编程之美>3.6编程判断两个链表是否相交,原题假设两个链表不带环. 为了防止剧透使得没看过原题目的读者丧失思考的乐趣,我把最好的解法隐藏起来.由于这个问题本身的解答并不是本文的重点,扩展问题也采用这种形式呈现. 注:位于(*)符号之间的文字出自于:http://blog.csdn.net/v_july_v/article/details/6447013,作者v_JULY_v. 用指针p1.p2分别指向两个链表头,不断后移:最后到达各自表尾时,若p1==p2,那么两个链表必相交用

JS运动从入门到兴奋1

hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌握了思想,不管需求怎么改变,我们都能把它玩弄于股掌之中...下面我们就由浅入深走进运动的世界吧. 首先来看最基础的运动:单个物体向右匀速运动到某一点停止例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetle

美国反疫苗接种运动的始末

在迈阿密儿童医院里,儿科医师为一个幼儿注射麻疹疫苗.为了防止近期爆发的麻疹传播,很多医生都鼓励儿童注射疫苗. 摄影:Joe Raedle, 盖蒂图片社撰文:Laura Parker 新泽西州长Chris Christie和肯塔基州参议员Rand Paul 可谓是“疫苗一代”.两人分别出生于1962年和1963年,当麻疹疫苗问世的时候他们还在上小学.那时,麻疹疫苗的出现成功使成百上千万的儿童免遭病毒侵袭.尽管麻疹没有小儿麻痹症那么令人恐惧,但还是足以影响400万儿童,令其中的48000个患病住

JS运动1 （转）

JS运动从入门到兴奋1 http://www.cnblogs.com/moqing/p/5666476.html hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌握了思想,不管需求怎么改变,我们都能把它玩弄于股掌之中...下面我们就进入运动的世界吧. 首先来看最基础的运动:单个物体向右匀速运动到某一点停止例子:一个按钮,一个div,

[转]第四章使用OpenCV探测来至运动的结构——Chapter 4:Exploring Structure from Motion Using OpenCV

仅供参考,还未运行程序,理解部分有误,请参考英文原版. 绿色部分非文章内容,是个人理解. 转载请注明:http://blog.csdn.net/raby_gyl/article/details/17471617 Chapter 4:Exploring Structure from Motion Using OpenCV 在这一章,我们将讨论来至运动结构(Structure from Motion,SfM)的概念,或者从一个运动的相机拍摄到的图像中更好的推测提取出来的几何结构,使用OpenCV的

php扩展imagick实例详解

imagick是一个可以供PHP调用ImageMagick功能的PHP扩展.使用这个扩展可以使PHP具备和ImageMagick相同的功能. PHP建图通常都用GD库,因为是内置的不需要在服务器上额外安装插件,所以用起来比较省心,但是如果你的程序主要的功能就是处理图像,那麼就不建议用GD了,因为GD不但低效能而且能力也比较弱,佔用的系统资源也颇多,另外GD的creatfrom也有bug,而imagick却是一个很好的替代品,为此最近把我的一个项目由GD改成了imagick,但是改完之后出现了一些

运动框架中级

多个物体同时运动 •例子:多个Div,鼠标移入变宽 –单定时器,存在问题 –每个Div一个定时器 <!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">

JS运动从入门到精髓！哈哈

首先来看最基础的运动:单个物体向右匀速运动到某一点停止例子:一个按钮,一个div,点击按钮,让div向右运动到某一个位置暂停 // 原理: 1 获取物体当前的位置 oDiv.offsetleft // 2 利用定时器,每隔一定的时间,让物体位置增加相同的距离(10px). // 3 判断物体是否移动到指定位置(500px),如果到达,就清除定时器 var oBtn = document.getElementById('btn'); var oDiv = document.getEle