深入JavaScript之JS的运动-js教程-PHP中文网

深入JavaScript之JS的运动

php中世界最好的语言

发布： 2018-03-13 13:38:58

原创

1700人浏览过

这次给大家带来深入javascript之js的运动，使用javascript之js的运动注意事项有哪些，下面就是实战案例，一起来看一下。

JS运动基础

运动框架

在开始运动时，关闭已有定时器

把运动和停止隔开(if/else)

1.匀速运动

nbsp;HTML&gt;
    <meta>
    <title>01-运动基础</title>
    <style>
        #div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;}    </style>
    <script>
        //定时器
        var timer=null;        function startMove()        {            var oDiv=document.getElementById(&#39;div1&#39;);            //为了保证只有一个定时器工作,把之前的定时器全关了
            clearInterval(timer);
            timer=setInterval(function (){                var speed=1;                if(oDiv.offsetLeft>=300)
                {
                    clearInterval(timer);
                }                else
                {
                    oDiv.style.left=oDiv.offsetLeft+speed+&#39;px&#39;;
                }
            }, 30);
        }    </script><input><div></div>

登录后复制

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}</style><script>window.onload=function (){    var oDiv=document.getElementById(&#39;div1&#39;);
    
    oDiv.onmouseover=function ()    {
        startMove(0);
    };
    oDiv.onmouseout=function ()    {
        startMove(-150);
    };
};var timer=null;function startMove(iTarget){    var oDiv=document.getElementById(&#39;div1&#39;);
    
    clearInterval(timer);
    timer=setInterval(function (){        //先初始化速度
        var speed=0;        //开始位置 > 终点位置:比方 起点:350 终点 50 要想到50这个位置,速度得为:-10; 
        //oDiv.offsetLeft : 起点位置
        //iTarget终点位置
        if(oDiv.offsetLeft>iTarget)
        {
            speed=-10;
        }        else
        {
            speed=10;
        }        //这个函数存在一个漏洞,如果oDiv.offsetLef 刚好t >=iTarget 定时器不会停止
        if(oDiv.offsetLeft==iTarget)
        {
            clearInterval(timer);
        }        else
        {
            oDiv.style.left=oDiv.offsetLeft+speed+&#39;px&#39;;
        }
    }, 30);
}</script></head><body><div id="div1">
    <span>分享到</span></div></body></html>

登录后复制

3.淡入淡出

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>03-淡入淡出</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            opacity:0.3; //兼容chrome和ff
            filtr:alpha(opacity:30);//兼容低版本的IE
        }    </style>
    <script>
        window.onload = function () {            var oDiv = document.getElementsByTagName(&#39;div&#39;)[0];
            oDiv.onmouseover = function () {
                changeAlpha(100);
            };
            oDiv.onmouseout = function () {
                changeAlpha(30);
            };            var timer = null;            var alpha = 30;            function changeAlpha(isTarget) {
                clearInterval(timer);                var speed = 0;
                timer = setInterval(function () {                    //注意这个速度判断要写在定时器里面
                    if (alpha < isTarget){
                        speed = 10;
                    }else {
                        speed = -10;
                    }                    if (alpha == isTarget){
                        clearInterval(timer);
                    }else {
                        alpha += speed;
                        oDiv.style.opacity = alpha/100;
                        oDiv.style.filter = &#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;
                    }
                },30);
            }
        }    </script></head><body><div></div></body></html>

登录后复制

3.缓冲运动

逐渐变慢，最后停止

距离越远速度越大

速度由距离决定

速度=(目标值-当前值)/缩放系数

Math.ceil():向上取整 Math.ceil(3.41) 结果是4 ,Math.ceil(-9.8) 结果是 -9; Math.floor():向下取整 Math.floor(-0.9) 结果是 -1;

登录后复制

例子：缓冲菜单
Bug：速度取整,取小数会出事!!!

<html><head>    <meta charset="utf-8">    <title>无标题文档</title>    <style>        *{            padding: 0;            margin: 0;        }        #div1 {width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}        #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}    </style>    <script>        function startMove()        {            var oDiv=document.getElementById(&#39;div1&#39;);            setInterval(function (){                var speed=(300-oDiv.offsetLeft)/10;                //缓冲运动一定要取整,否则会出事的!!!!                //Math.ceil():向上取整 Math.ceil(3.41) 结果是4 ,Math.ceil(-9.8) 结果是 -9;                //Math.floor():向下取整 Math.floor(-0.9) 结果是 -1;                //speed=Math.floor(speed);                //速度大于0,向上取整,速度小于0,向下取整;                speed=speed>0?Math.ceil(speed):Math.floor(speed);                //速度不能为小数:速度里面有小数,导致oDiv.style.left的值带有小数,而oDiv.style.left会自动取整,导致他把小数抹掉了,导致误差!!!                //故把速度向上取整,来避免此误差                oDiv.style.left=oDiv.offsetLeft+speed+&#39;px&#39;;                document.title=oDiv.offsetLeft+&#39;,&#39;+speed;            }, 30);        }    </script></head><body><input type="button" value="开始运动" onclick="startMove()" /><div id="div1"></div><div id="div2"></div></body></html>

登录后复制

缓冲运动一(chorme浏览器上有兼容问题)

跟随页面滚动的缓冲侧边栏

潜在问题：目标值不是整数时,会出现抖动的情况,只要强转成整数就可以了!可能会有0.5像素的误差,可以忽略不计!

右侧悬浮框

先了解下一些基础知识

获取浏览器滚动条滚动的距离
1.在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代document.body,可以这样写
例：
获取浏览器滚动条滚动的距离
var top = document.documentElement.scrollTop || document.body.scrollTop;
在JavaScript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
例：var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
这么写可以得到很好的兼容性。
相反，如果不做声明的话，document.documentElement.scrollTop反而会显示为0。

document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度
<html><head><meta charset="utf-8"><title>右侧悬浮窗</title><style>#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}</style><script>window.onscroll=function (){    var oDiv=document.getElementById(&#39;div1&#39;);    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;        //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+&#39;px&#39;;    startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);};var timer=null;function startMove(iTarget){    var oDiv=document.getElementById(&#39;div1&#39;);        clearInterval(timer);    timer=setInterval(function (){        var speed=(iTarget-oDiv.offsetTop)/4;        speed=speed>0?Math.ceil(speed):Math.floor(speed);                if(oDiv.offsetTop==iTarget)        {            clearInterval(timer);        }        else        {            oDiv.style.top=oDiv.offsetTop+speed+&#39;px&#39;;        }    }, 30);}</script></head><body style="height:2000px;"><div id="div1"></div></body></html>

登录后复制

匀速停止

//绝对值,
Math.abs()
比如:(Math.abs(-6)) 和 (Math.abs(6))结果都是6,他的意思就是把值变成没有正负号的样子,都是正的.

<html><head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}        #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}        #div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}    </style>
    <script>
        var timer=null;        function startMove(iTarget)        {            var oDiv=document.getElementById(&#39;div1&#39;);
            clearInterval(timer);
            timer=setInterval(function (){                var speed=0;                if(oDiv.offsetLeft<iTarget)
                {
                    speed=10;
                }                else
                {
                    speed=-10;
                }                //目标和物体之间的距离的绝对值小于等于速度,就算他达到目标了.
                if(Math.abs(iTarget-oDiv.offsetLeft)<=Math.abs(speed))
                {
                    clearInterval(timer);                    //目标和物体之间的有一小小的距离,计算误差导致的.
                    //让left直接等于目标点
                    oDiv.style.left=iTarget+&#39;px&#39;;
                }                else
                {
                    oDiv.style.left=oDiv.offsetLeft+speed+&#39;px&#39;;
                }
            }, 30);
        }    </script></head><body><input type="button" value="到100" onclick="startMove(100)" /><input type="button" value="到300" onclick="startMove(300)" /><div id="div1"></div><div id="div2"></div><div id="div3"></div></body></html>

登录后复制