<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-运动基础（一）的更多相关文章

  1. 第八节 JS运动基础

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

  2. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  3. JS运动基础(一)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. js运动基础2（运动的封装）

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

  5. JS运动基础(四) 碰撞运动

    碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...

  6. JS运动基础(三) 弹性运动

    加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...

  7. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

  8. JS运动基础

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Javascript 运动基础 01

    JS运动基础  运动基础   让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快   匀速运动 速度不变 <s ...

  10. JS学习-基础运动

    多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...

随机推荐

  1. ActiveMQ in Action(5) - Clustering

    关键字: activemq 2．5 Clustering    ActiveMQ从多种不同的方面提供了集群的支持.2．5．1 Queue consumer clusters    ActiveMQ支持 ...

  2. NOIP2011-普及组复赛模拟试题-第二题-买票

    题目背景 Background Ztc真的遇上黄牛了...  题目描述 Description   周末Ztc想去剧场看演出,但是他没有票.这时,救世主Wzj出现了,他慷慨地愿意卖给Ztc一些票.   ...

  3. nmon性能统计工具使用-初认识

    1.概述 监控,在检查系统问题或优化系统性能工作上是一个不可缺少的部分.通过操作系统监控工具监视操作系统资源的使用情况,间接地反映了各服务器程序的运行情况.根据运行结果分析可以帮助我们快速定位系统问题 ...

  4. Windows文件监视器 1.0 绿色版

    软件名称:软件名称: Windows文件监视器 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / WinXP / Win2008 软件大小: 1 ...

  5. css实现多行超出显示省略号？

    可以实现,但是用的是-webkit-私有属性.我用js已经解决了.代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-over ...

  6. RecyclerView onTouch & onClick 触摸事件与点击事件

    遇到一种情况需要处理,RecyclerView所在Activity需要处理滑动事件用于返回(onBackPressed). 手势检测: @Override public boolean onFling ...

  7. Python 数据分析包：pandas 基础

    pandas 是基于 Numpy 构建的含有更高级数据结构和工具的数据分析包 类似于 Numpy 的核心是 ndarray,pandas 也是围绕着 Series 和 DataFrame 两个核心数据 ...

  8. robotframework+seleniumlibrary自动化测试：测试环境搭建

    robotframework是由python编写的自动化测试框架,使用robotframework需要安装 python库 python 和 robotframework 的下载地址都可百度到 环境搭 ...

  9. [bzoj3196][Tyvj 1730][二逼平衡树] (线段树套treap)

    Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 1.查询k在区间内的排名 2.查询区间内排名为k的值 3.修改某一位值上的数值 4.查询k在 ...

  10. Xbox360自制系统GOD包安装教程

    1.准备工作 U盘或移动硬盘一个,已下载好的GOD包,本教程用一个32G的U盘和游戏<猎天使魔女>为例. 右击U盘,属性,查看你的U盘是否为FAT32格式. 如果是FAT32格式,则可直接 ...