蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 44|回复: 0

javascript匀速运动实现方法分析

[复制链接]

1923

主题

1

好友

1591

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 6 天前 |显示全部楼层
    javascript匀速运动实现方法分析
    本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考,具体如下:
    匀速运动步骤:
    1 清除定时器
    2 开启定时器
    3 运动是否完成:a、运动完成,清除定时器;b、运动未完成继续
    匀速运动停止条件:距离足够近Mathabs(当然距离-目标距离) lt; 最小运动距离
    运行效果截图如下:

    div的匀速运动(简单运动)示例:


    lt;!doctype htmlgt;
    lt;htmlgt;
    lt;headgt;
    lt;meta charset="utf-8"gt;
    lt;titlegt;JavaScript匀速运动lt;/titlegt;
    lt;stylegt;
    div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
    span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
    lt;/stylegt;
    lt;scriptgt;
    windowonload = function()
    {
    var oBtn = documentgetElementById('btn1');
    var oDiv = documentgetElementById('div1');
    oBtnonclick = function()
    {
      startMove(oDiv, 300);
    };
    };
    var timer = null;
    function startMove(obj, iTarget)
    {
    clearInterval(timer);
    timer = setInterval(function(){
      var iSpeed = 0;
      if(objoffsetLeft lt; iTarget)
      {
       iSpeed = 7;
      }
      else
      {
       iSpeed = -7;
      }
      if( Mathabs( objoffsetLeft - iTarget ) lt; 7 )
      {
       clearInterval(timer);
       objstyleleft = iTarget + 'px';
      }
      else
      {
       objstyleleft = objoffsetLeft + iSpeed + 'px';
      }
    }, 30);
    }
    lt;/scriptgt;
    lt;/headgt;
    lt;bodygt;
    lt;button id="btn1"gt;移动lt;/buttongt;
    lt;div id="div1"gt;lt;/divgt;
    lt;spangt;lt;/spangt;
    lt;/bodygt;
    lt;/htmlgt;



    更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》
    希望本文所述对大家JavaScript程序设计有所帮助。
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-19 07:40

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部