js实现四个方向滚动的球

效果图：

代码如下：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style * { margin 3360 0；padd : 0；} #包装{宽度： 800px高度： 500像素；border: 1px实心深粉色；左边距left: 10px边距-top : 5px；向左浮动：} # input 1 { width : 80pxmargin : 5px自动5px 10px font-size : 0；向左浮动：} # div1 { width: 100px高度： 100像素；背景热粉色绝对位置：top : 20pxleft : 30pxborder-radius : 100像素；box-shadow: 0px 5px 5px rgba(0，0，0，5);}输入{宽度： 100像素高度： 40px线高： 40px文本对齐：中心；font-size : 18px显示器：块；背景：浅绿色边距-底部： 5px}/style/head body div id=' wrap ' div id=' div 1 '/div/div id=' input 1 '输入类型='按钮'值='向左id='btn2' /输入类型='按钮'值='向右id='btn1'/输入类型='按钮'值='向上id='btn3' /输入类型='按钮'值='向下id=' BTN 4 '/div脚本var OBn=文档。GetElementBYid(' BTN 1 ')；var oDiv=文档。getelementbyid(' div 1 ')；var obt N2=文档。getelementbyid(' BTN 2 ')；var obtn 3=文档。getelementbyid(' BTN 3 ')；var obtn 4=文档。getelementbyid(' BTN 4 ')；obtn 4。onclick=function(){ move(oDiv，10，380，' 0px 5px 5px rgba(0，0，0，5)'、'顶')；} obtn 3。onclick=function(){ move(oDiv，-10，30，' 0px -5px 5px rgba(0，0，0，5)'、'顶')；} obtn 2。onclick=function(){ move(oDiv，-10，40，'-5px 5px rgba(0，0，0，5)'、'左')；} obtn。onclick=function(){ move(oDiv，10，680，' 5px 5px 5px rgba(0，0，0，5)'、'左')；}函数移动(对象、值、目标、bs、dir){对象。风格。BoxShadow=bsclearInterval(obj。计时器)；物体。timer=setInterval(function(){ var speed=parsent(getStyle(obj，dir))val；if(速度=目标值0){速度=目标；} if(速度=目标值0){速度=目标} obj。style[dir]=速度' px '；if(speed==target){ clearInterval(obj。计时器)；} },30);}函数getStyle(obj，sty){ return obj.currentStyle？物体。当前样式[sty]: get computed style(obj)[sty]；}/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！