JS-运动基础（一）
<title>无标题文档</title>
<style>
#div1{width:200px;height:200px; background:red; position:absolute; left:0px; top:50px;}
</style>
<script>
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer); //为避免同时开启多个定时器
timer=setInterval(function (){
var speed=10;
if(oDiv.offsetLeft>300)
{
clearInterval(timer);
}
else //if...else避免在到达终点位置后按开始按钮再次执行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>
运动框架及应用
运动框架
1.在开始运动时，关闭已有定时器
2.把运动和停止隔开（if/else）
运动框架实例分享
1.”分享到“侧边栏
通过目标点，计算速度值
<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();
}
oDiv.onmouseout=function ()
{
startMove2();
}
};
var timer=null; function startMove()
{
var oDiv=document.getElementById('div1'); clearInterval(timer);
timer=setInterval(function (){
if(oDiv.offsetLeft==0)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
},30);
}
function startMove2()
{
var oDiv=document.getElementById('div1'); clearInterval(timer);
timer=setInterval(function (){
if(oDiv.offsetLeft==-150)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
},30);
}
</script>
</head> <body>
<div id="div1">
<span>分享到</span>
</div>
</body>
改进1
window.onload=function ()
{
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function ()
{
startMove(10,0);
}
oDiv.onmouseout=function ()
{
startMove(-10,-150);
}
};
var timer=null; function startMove(speed,iTarget)
{
var oDiv=document.getElementById('div1'); clearInterval(timer);
timer=setInterval(function (){
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
} </script>
改进2
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>
JS-运动基础（一）的更多相关文章
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- 学习blus老师js(6)--js运动基础
运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...
- JS运动基础(一)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- js运动基础2（运动的封装）
简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...
- JS运动基础(四) 碰撞运动
碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...
- JS运动基础(三) 弹性运动
加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
- JS运动基础
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Javascript 运动基础 01
JS运动基础 运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动 速度不变 <s ...
- JS学习-基础运动
多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...
随机推荐
- OMCS开发手册（04） －－ 二次开发流程
在掌握了前面几篇关于OMCS的详细介绍后,我们就可以正式基于OMCS进行二次开发了.下面我们就从服务端和客户端的角度分别介绍开发的步骤. 一.服务端开发 抛开具体的业务逻辑而言,就OMCS的服务端的开 ...
- AS3.0杂记——Dictionary、Object与Array
来源:http://blog.csdn.net/m_leonwang/article/details/8811829 Object.Array与Dictionary都是关联数组,就是用“键”来索引存储 ...
- C# WebRequest简单调用WebService方法
//get string res = GetStringByUrl("http://你的地址/WebService.asmx/方法名?参数=1"); //post string r ...
- Minigui开发之遥控控制逻辑算法
引言 在开发公司的minigui产品时,需要用遥控器来切换显示屏上的图标和控件,这就涉及到一个问题,如何获得下一个选中的图标或控件呢? 解决思路 利用每个控件自身的ID号,建立一张类似矩阵的表,用坐标 ...
- 如何对Site Settings页面进行定制化 添加一个setting 链接
下面在Site Settings页 >Site Administration里添加一个Ruby Setting 超链接,点击进入到rubySetting.aspx 1.在SharePoint p ...
- Spring的后置处理器BeanPostProcessor
一.BeanPostProcessor接口的作用 如果我们需要在Spring容器完成Bean的实例化.配置和其他的初始化前后添加一些自己的逻辑处理,我们就可以定义一个或者多个BeanPostProce ...
- git基本命令--远程
git clone: # clone到 <本地目录名> $ git clone <版本库的网址> <本地目录名> # 克隆版本库的时候,所使用的远程主机自动被Git ...
- HDU 4857 逃生（反向拓扑排序+优先队列）
(￣▽￣)" //这题对序号输出有要求,较小的序号优先输出,所以用到优先队列 //优先队列是优先弹出值最大的,所以最后要反向输出结果,才是正确的output #include<iost ...
- 无论url请求什么.都可以拼接class类名.实例化.传递get参数-->给当前控制器-->传递给抽象父类-->都交给抽象父类.这个方法去处理call_user_func_array()
<?phpdefine('DS','/');define('A_PATH',str_replace('\\','/',dirname(__FILE__)).DS); //01获取到主程序目录cl ...
- C# WebBrowser函数互相调用
在使用C#开发winform程序过程中,我们经常会碰到嵌入了一个WebBrowser的浏览器控件.很多时候,我们需要在程序里控制网页的显示方式,或者调用网页当中的某个JS函数,反过来,也有可能网页也需 ...