用js实现小球的自由移动代码
发布时间:2023-08-23 02:57:29
标签: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>
图:
0
投稿
猜你喜欢
- 使用JavaScript写的一个旋转的彩圈效果图<!DOCTYPE html><html><head>&
- 输入框Input 应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。 ——《HTML权威指南》Web 应用程序总是利用表单
- 运行环境:IIS脚本语言:VBScript数据库:Access/SQL Server数据库语言:SQL1.概要:不论是在论坛,还是新闻系统,
- 本文实例讲述了php使用Cookie实现和用户会话的方法。分享给大家供大家参考。具体分析如下:PHP 包含了很多的函数,可以用来管理和记录用
- JS获取多选框checkbox被选中的个数。var checkbox = document.getElementsByName("
- Oracle中表的外键是保证系统参照完整性的手段,而参照完整性是指分布在两个表中的列所满足的具有主从性质的约束关系。外键涉及到两个表,其中一
- 百度了一下,找了点别人的方法改进了一下。 获取天气网址:http://www.weather.com.cn/html/weather/101
- 最近,为了能在数据库服务器中运行其他应用程序,在保持数据库操作系统版本不变的前提下对数据库服务器进行了软、硬件上的升级。在软件上,将操作系统
- 要向数据库中添加超级链接,要经过两个步骤,一是在表中定义字段类型为“超级链接”,一是向此字段中添加数据。要在表中定义字段类型为“超级链接”,
- 有什么办法可以列出数据视图吗?有,假设当前数据库为flashdays,则我们可用下列代码列出它的数据视图:pubDatabase
- 如何在页面错误时向数据库中添加记录?在ASP中,我在页面中添加了On Error Resume Next错误命令,以消除和避免程序错误。现在
- 五一在家写的,和大家分享,支持所有浏览器,添加了左侧菜单点击变色效果<!DOCTYPE html PUBLIC "-//W3
- (1)int转strings := strconv.Itoa(i)等价于s := strconv.FormatInt(int64(i), 1
- SQL Server数据库快捷键:书签:清除所有书签。 CTRL-SHIFT-F2书签:插入或删除书签(切换)。 CTRL+F2书签:移动到
- 减少HTTP请求,是可以提高网站速度的,把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和backgr
- 原来字母还可以组合成各种动物图案,真是佩服设计师的奇思妙想,很可爱,超级有趣的组合!Bembo's Zoo 猴子:羊是牛吗,勤劳的水
- 原来图片自适应宽度一般都是通过Javascript来解决的,但是多少还是比较麻烦。还有一种通过设置外层容器overflow:hidden属性
- javascript 代码实现vbscript中的trim、left、right等函数兼容IE,FireFox。<style>b
- 将表数据生成SQL脚本的存储过程示例:CREATE PROCEDURE dbo.UspOutputData @tablename sysna
- 先前在DW教学-Dreamweaver量身打造Wordpress留言板(一) 教学文章中,已经成功的把前端留言机制与界面搞定了,虽然有了留言