运动基础

一、匀速运动

运动框架
在开始运动时,关闭已有定时器
把运动和停止隔开(if/else)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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>
 
运动框架实例
例子1:“分享到”侧边栏
  通过目标点,计算速度值
<!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; if(oDiv.offsetLeft>iTarget)
{
speed=-10;
}
else
{
speed=10;
} 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>
例子2:淡入淡出的图片
  用变量存储透明度
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1'); oDiv.onmouseover=function ()
{
startMove(100);
};
oDiv.onmouseout=function ()
{
startMove(30);
};
}; var alpha=30;
var timer=null; function startMove(iTarget)
{
var oDiv=document.getElementById('div1'); clearInterval(timer);
timer=setInterval(function (){
var speed=0; if(alpha<iTarget)
{
speed=10;
}
else
{
speed=-10;
} if(alpha==iTarget)
{
clearInterval(timer);
}
else
{
alpha+=speed; oDiv.style.filter='alpha(opacity:'+alpha+')';
oDiv.style.opacity=alpha/100;
}
}, 30);
}
</script>
</head> <body>
<div id="div1"></div>
</body>
</html>

二、缓冲运动

逐渐变慢,最后停止
距离越远速度越大
速度由距离决定
速度=(目标值-当前值)/缩放系数
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:0px; top:50px;}
#div2 {width: 1px; height: 300px; background: black; position: absolute;left:300px;}
</style>
<script>
function startMove()
{
var oDiv=document.getElementById('div1');
setInterval(function (){
var speed=(300-oDiv.offsetLeft)/10; speed = speed>0 ? Math.ceil(speed): Math.floor(speed); oDiv.style.left=oDiv.offsetLeft+speed+'px'; document.title = speed;
}, 30);
}
</script>
</head> <body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
<div id="div2"></div>
</body>
</html>
例子:缓冲菜单
Bug:速度取整
speed=speed>0?Math.ceil(speed):Math.floor(speed);
跟随页面滚动的缓冲侧边栏
潜在问题:目标值不是整数时
解决方法是让它传进来的就是个整数就完了。

例子:对联悬浮框:

<!DOCTYPE HTML>
<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)/2+scrollTop+'px';
startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+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
{
document.title=iTarget;
document.getElementById('txt1').value=oDiv.offsetTop;
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
}, 30);
}
</script>
</head> <body style="height:2000px;">
<input type="text" id="txt1" style="position:fixed; right:0; top:0;" />
<div id="div1"></div>
</body>
</html>
 

三、匀速运动的停止条件

运动终止条件
匀速运动:距离足够近
缓冲运动:两点重合
<!DOCTYPE HTML>
<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=7;
}
else
{
speed=-7;
} if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
{
clearInterval(timer); 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>

------------

学习blus老师js(6)--js运动基础的更多相关文章

  1. 学习blus老师js(3)--定时器的使用

    1.无缝滚动——基础 物体运动基础 让Div移动起来 offsetLeft的作用 用定时器让物体连续移动   offsetLeft: 获取物体的左边距:最大的优点在于可以综合考虑所有影响这个物体位置的 ...

  2. 学习blus老师js(1)--基础

    1.网页换肤: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <t ...

  3. 学习blus老师js(5)--DOM操作应用高级

    一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...

  4. 学习blus老师js(2)--深入JavaScript

    1.函数传参 可变参(不定参):arguments 参数的个数可变,参数数组   例1.求和 求所有参数的和 <!DOCTYPE HTML> <html> <head&g ...

  5. 学习blus老师js(4)--DOM

    一.DOM节点 1.获取子节点: childNodes  nodeType         节点类型 children            只包括元素,不包括文本:  子节点只算第一层.只算孩子一级 ...

  6. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  7. js运动基础2(运动的封装)

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

  8. JS运动---运动基础(匀速运动)

    [一]运动基础 (2)基础运动案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. jquery与js的区别与基础操作

    一.什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

随机推荐

  1. Axios 使用采坑经验

    报错信息:Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL 解 ...

  2. BZOJ 3572 【HNOI2014】 世界树

    题目链接:世界树 首先看到\(\sum m_i\le 3\times 10^5\)这个条件,显然这道题就需要用虚树了. 在我们构建出虚树之后,就可以用两遍\(dfs\)来求出离每个点最近的议事处了.然 ...

  3. redis的过期策略以及内存淘汰机制

    redis采用的是定期删除+惰性删除策略. 为什么不用定时删除策略? 定时删除,用一个定时器来负责监视key,过期则自动删除.虽然内存及时释放,但是十分消耗CPU资源.在大并发请求下,CPU要将时间应 ...

  4. sql语句in

    在今天之前sql一直用in语句,知道今天遇到一张数据量很大的表查了三分钟才查出来,这才意识到数据库优化有多重要.作为一名开发人员,首先从优化sql语句开始. 之前用in写sql是这样的 select ...

  5. 关于 XML 头声明和standalone 的解释

    <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <roo ...

  6. PHP和JAVA整合开发的三个方案(六)

    php作为前端开发,java负责后台开发,这样取长补短的方案很适合现在web开发.现在PHP和JAVA整合开发比较好的方案只有3个:1.SOAP2.php-java-bridge3.Quercus Q ...

  7. BZOJ2314 士兵的放置

    树形DP,恩然后就不会了... 先写了个错的离谱程序...果然WA了 然后开始乱搞,欸,对了! 令f[i], g[i], h[i]分别表示i号节点自己放士兵,被儿子上的士兵控制,不被儿子上的士兵控制但 ...

  8. Jquery表单清空

    虽然reset方法可以做到一部分,但是如果你有个元素是这样的 <input name="percent" value="50"/> 那么点击rese ...

  9. ansible入门01

    1.批量操作 1.操作系统选型与安装: 1.安装在实体机上: 批量安装: PXE(预引导执行环境):需要网卡上有DHCP客户端去加载bootloadder cobbler: kickstack: 2. ...

  10. java基础第10天

    Java异常 Exception 异常指的的在运行期出现的错误,在编译阶段出现的语法错误等,不能称之为异常. 编译类异常 必须处理之后才能正常编译(类找不到,IO异常,在API文档中明确写明throw ...