用js实现小球的自由移动代码
更新时间：2013年04月22日 14:19:27 作者：
本篇文章小编为大家介绍，用js实现小球的自由移动代码。需要的朋友参考下
正在学习javascript 的朋友可以把它当作小练习动手做一做。加强自己的动手编码能力。
参考代码：
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ggggg</title>
<link rel="stylesheet" type="text/css" href="">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--js代码可以放置在任意位置，按照先后顺序依次执行 一般放在head标签之间-->
<script type="text/javascript">
//定义全局变量
//小球坐标
ballX=0;
ballY=0;
//小球在x,y轴移动的方向
directX=1;
directY=1;
//小球移动
function ballMove(){
//小球移动
ballX+=2*directX;
ballY+=2*directY;
//同时修改小球的top 和width
div2.style.top=ballY+'px';
div2.style.left=ballX+'px';
//window.alert(div1.offsetWidth);//offsetwidth在JS中是获取元素的宽,对应的还有offsetHeight
//判断转向
//learInterval(i);
if(ballX+div2.offsetWidth>=div1.offsetWidth ||ballX<=0){
directX=-directX;
}
if(ballY+div2.offsetHeight>=div1.offsetHeight || ballY<=0){
directY=-directY;
}
}
//定时器
var i=setInterval("ballMove()",10);
</script>
</head>
<body>
<div id="div1" style="width:400px;height:300px;border:1px solid silver;POSITION: absolute; TOP: 100px">
<div id="div2" style="position:absolute;left:0px;top:0px;"><img src="ball.png"></div>
</div>
</body>
</html>
图:
相关文章
js中的触发事件对象event.srcElement与event.target详解
这篇文章主要给大家介绍了js中的触发事件对象event.srcElement与event.target的相关资料，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
下面小编就为大家带来一篇js 自带的sort() 方法全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
JavaScript实现设置默认日期范围为最近40天的方法分析
这篇文章主要介绍了JavaScript实现设置默认日期范围为最近40天的方法,结合实例形式分析了javascript结合HTML5 date元素进行时间运算相关操作技巧,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了整理CocosCreator常用知识点，这些知识点，平时几乎都能用到，希望同学们看完后，可以自己去试一下，加深印象2021-04-04
这篇文章主要介绍了JavaScript设计模式--桥梁模式,结合实例形式分析了JavaScript设计模式中桥梁模式应用操作技巧与注意事项,需要的朋友可以参考下2020-05-05
网页加载时页面显示进度条（加载完成时显示网页内容）,这种效果在浏览网页很常见，本文也介绍一种实现方法，需要了解的朋友可以参考下2012-12-12
Google array.js 程序中建议改进的代码。思考为什么i-- 到了 i为0时while循环结束了？2010-01-01
这篇文章主要介绍了JavaScript基础之AJAX简单的小demo ，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下2017-01-01
这篇文章主要为大家详细介绍了javascript实现编写网页版计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了JavaScript 声明私有变量的两种方式，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下2021-02-02
最新评论