js写匀速运动中止

  • 时间:2018-06-06 01:50 作者:下班很无聊 来源:下班很无聊 阅读:116
  • 扫一扫,手机访问
摘要:一、HTML二、CSS#dog{display:block;width:100px;position: absolute;left: 0px;top:60px;}.bone{width: 100px;position:absolute;left: 410px;}三、scriptfunction st

一、HTML

二、CSS

#dog{

display:block;

width:100px;

position: absolute;

left: 0px;

top:60px;

}

.bone{

width: 100px;

position:absolute;

left: 410px;

}

三、script

js写匀速运动中止

js写匀速运动中止

function startMove(iTarget){

var oDog=document.getElementById('dog');

clearInterval(timer);

timer=setInterval(function(){

var iSpeed=0;

if (oDog.offsetLeft>iTarget) {

iSpeed=-7;

}

else{

iSpeed=7;

}

if (Math.abs(oDog.offsetLeft-iTarget)<7) {

clearInterval(timer);

oDog.style.left=iTarget+'px';

}

else{

oDog.style.left=oDog.offsetLeft+iSpeed+'px';

}

},30)

}

var timer=null;

window.onload=function(){

var oBtn=document.getElementById('btn1');

oBtn.onclick=function(){

startMove(330);

}

}

四、实际效果

js写匀速运动中止

有写的不对的地方,请大家指出,共同学习,共同进步;

喜欢请收藏,想看更多内容,请关注!

js写匀速运动中止

  • 全部评论(0)
最新发布的资讯信息
【网页前端|HTML】最全面的前端开发指南(2019-07-15 12:57)
【系统环境|数据库】零基础如何快速学好大数据?(2019-06-29 12:27)
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
【系统环境|服务器应用】Android完整知识体系路线(菜鸟-资深-大牛必进之路)(2019-06-11 06:34)
【系统环境|服务器应用】Java程序员小伙经历三个月备战,终获阿里offer(2019-06-11 06:34)
【系统环境|服务器应用】每日一问:谈谈对 MeasureSpec 的了解(2019-06-11 06:34)
【系统环境|服务器应用】【科普】晶体管-1(2019-06-11 06:34)
手机二维码手机访问领取大礼包
返回顶部