Js实现简单的小球运动特效

2019-11-20 10:34:14

字体：大中小

来源：转载

供稿：网友

废话不多说了，直接给大家贴js代码了，具体代码如下所示：

<!DOCTYPE html><html><head><title></title><meta http-equiv="content-type" content="text/html;charset=utf-"/></head><body style="background:pink;"><div id="ball" style="position:absolute;" onmouseover="stop()" onmouseout="jixu()"><img src="http://img.taobaocdn.com/imgextra/i//TBfGvsdpXXXXbDXXXXXXXXXXXX-.gif"/></div><script type="text/javascript">//定义局部变量var directX=;//定义x轴方向var directY=;//定义y轴方向var ballX=;//定义x轴坐标var ballY=;//定义y轴坐标var speed=;//定义一个速度var myball=document.getElementById("ball");function ballMove(){ballX=ballX+directX*speed;ballY=ballY+directY*speed;//改变div的left,top的值myball.style.left=ballX+"px";myball.style.top=ballY+"px";//判断x轴什么时候转向if(ballX+myball.offsetWidth>=document.documentElement.clientWidth||ballX<=){//clientWidth浏览器不带滚动条的宽度;clientHeight浏览器不带工具栏菜单栏以及滚动条等的高度directX=-directX;//offsetWidth可以返回一个对象的实际宽度(不带单位)offsetHeight类同}//判断y轴何时转向if(ballY+myball.offsetHeight>=document.documentElement.clientHeight||ballY<=){directY=-directY;}}var stopmove=setInterval("ballMove()",);function stop(){clearInterval(stopmove);}function jixu(){var stopmove=setInterval("ballMove()",); ;}</script></body></html>

以上代码是比较简单，希望对大家使用Js实现简单的小球运动效果有所帮助！

上一篇：用canvas 实现个图片三角化（LOW POLY）效果

下一篇：JavaScript与jQuery实现的闪烁输入效果