时间:2021-07-01 10:21:17 帮助过:9人阅读
JS运动基础
运动框架
在开始运动时,关闭已有定时器
把运动和停止隔开(if/else)
1.匀速运动
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <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('div1'); //为了保证只有一个定时器工作,把之前的定时器全关了 clearInterval(timer); timer=setInterval(function (){ var speed=1; if(oDiv.offsetLeft>=300) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } }, 30); } </script></head><body><input id="btn1" type="button" value="开始运动" onclick="startMove()" /><div id="div1"></div></body></html>
<!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>
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
深入JavaScript之基础应用
JS的8个必须注意的基础知识
以上就是深入JavaScript之JS的运动的详细内容,更多请关注Gxl网其它相关文章!