当前位置:才华咖 > 互联网计算机 > 计算机 > java语言 > javascript实现小球的自由移动代码
手机版

javascript实现小球的自由移动代码

来源:才华咖 阅读:4.5K 次

用javascript实现小球的自由移动是不是很神奇啊?下面小编交给大家实现的.方法,欢迎阅读以下代码,更多详情请关注应届毕业生考试网。

javascript实现小球的自由移动代码

  代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>javascript实现小球的自由移动</title>

<link rel="stylesheet" type="text/css" href="">

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<script type="text/javascript">

//定义全局变量

//小球坐标

ballX=0;

ballY=0;

//小球在x,y轴移动的方向

directX=1;

directY=1;

//小球移动

function ballMove(){

//小球移动

ballX+=2*directX;

ballY+=2*directY;

//同时修改小球的top 和width

=ballY+'px';

=ballX+'px';

//t(etWidth);

//offsetwidth在JS中是获取元素的宽,对应的还有offsetHeight

//判断转向

//learInterval(i);

if(ballX+etWidth>=etWidth || ballX<=0){

directX=-directX;

}

if(ballY+etHeight>=etHeight || ballY<=0){

directY=-directY;

}

}

//定时器

var i=setInterval("ballMove()",10);

</script>

</head>

<body>

<p id="p1" style="width:400px;height:300px;border:1px solid silver;POSITION: absolute; TOP: 100px">

<p id="p2" style="position:absolute;left:0px;top:0px;">

<img src="ball.png">

</p>

</p>

</body>

</html>

本文链接:https://www.caihuaka.com/jsjzs/java/po0vo.html

Copyright © 2024. 才华咖 All right reserved. 浙ICP备20120231号-3

文字美图素材,版权属于原作者。部分文章内容由网友提供推送时因种种原因未能与原作者联系上,若涉及版权问题,敬请原作者联系我们,立即处理。