这次给大家带来深入javascript之js的运动，使用javascript之js的运动注意事项有哪些，下面就是实战案例，一起来看一下。
js运动基础
运动框架
在开始运动时，关闭已有定时器
把运动和停止隔开(if/else)
1.匀速运动
9a78f9382cfffc6c56b2ff1d7da5de14100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e
4d0d87937f6c83b675e896c64d3eb7c9
b2386ffb911b14667cb8f0f91ea547a701-运动基础6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
#div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;} 531ac245ce3e4fe3d50054a55f265927
3f1c4e4b6b16bbbd69b2ee476dc4f83a
//定时器
var timer=null; function startmove() { var odiv=document.getelementbyid('div1'); //为了保证只有一个定时器工作,把之前的定时器全关了
clearinterval(timer);
timer=setinterval(function (){ var speed=1; if(odiv.offsetleft>=300)
{
clearinterval(timer);
} else
{
odiv.style.left=odiv.offsetleft+speed+'px';
}
}, 30);
} 2cacc6d41bbb37262a98f745aa00fbf09c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dfe739c9f8c7c7066ccc8668c0cff58f264cb571ed5952d9b43da1f2d70a36e9116b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
<!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('div1');
odiv.onmouseover=function () {
startmove(0);
};
odiv.onmouseout=function () {
startmove(-150);
};
};var timer=null;function startmove(itarget){ var odiv=document.getelementbyid('div1');
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+'px';
}
}, 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('div')[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 = 'alpha(opacity:'+alpha+')';
}
},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('div1'); 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+'px'; document.title=odiv.offsetleft+','+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标准网页或者更简单的说是带<!doctype ..>标签的页面里得到的结果是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('div1'); var scrolltop=document.documentelement.scrolltop||document.body.scrolltop; //odiv.style.top=document.documentelement.clientheight-odiv.offsetheight+scrolltop+'px'; startmove(document.documentelement.clientheight-odiv.offsetheight+scrolltop);};var timer=null;function startmove(itarget){ var odiv=document.getelementbyid('div1'); 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+'px'; } }, 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('div1');
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+'px';
} else
{
odiv.style.left=odiv.offsetleft+speed+'px';
}
}, 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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
深入javascript之基础应用
js的8个必须注意的基础知识
以上就是深入javascript之js的运动的详细内容。