宝哥软件园

javascript弹性运动效果简单实现方法

编辑:宝哥软件园 来源:互联网 时间:2021-09-18

本文实例讲述了爪哇岛描述语言弹性运动效果简单实现方法。分享给大家供大家参考,具体如下:

弹性运动实现原理:加速运动减速运动摩擦运动

运行效果截图如下:

实例代码如下:

!doctype html html ownerta charset=' utf-8 '标题无标题文档/title style # div 1 { width :100 px;高度:100 px背景:红色;位置:绝对;left:0top:50px}/style脚本窗口。onload=function(){ var OBtn=document。getelementbyid(' BTN 1 ');var oDiv=文档。getelementbyid(' div 1 ');奥宾。onclick=function(){ startMove(oDiv,300);};};var iSpeed=0;var left=0;函数startMove(obj,itar get){ clearInterval(obj。计时器);物体。timer=setInterval(function(){ isPeed=(itar get-obj。offset left)/5;iSpeed *=0.7left=iSpeedif(数学。ABS(I速)1数学。ABS(左-itar get)1){ clearInterval(obj。计时器);物体。风格。left=itar get ' px} else { obj。风格。左=obj。offsetleft是提要“px”;} }, 30);}/script/head dyinput id=' BTN 1 ' type=' button ' value='运动/div id=' div 1 '/div div style=' width :1 px;高度:300 px背景:黑色;位置:绝对;top :0 ' left :300 px '/div/body/html更多关于Java脚本语言运动效果相关内容可查看本站专题: 《JavaScript运动效果与技巧汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。

更多资讯
游戏推荐
更多+