首页 > 开发 > JS > 正文

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

2024-05-06 16:28:39
字体:
来源:转载
供稿:网友
这篇文章主要介绍了Js实现简单的小球运动特效的相关资料,需要的朋友可以参考下
 

废话不多说了,直接给大家贴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实现简单的小球运动效果有所帮助!



注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表