用js实现小球的自由移动代码


Posted in Javascript onApril 22, 2013

正在学习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实现小球的自由移动代码

Javascript 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
常用DOM整理
Jun 16 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 #Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 #Javascript
js播放wav文件(源码)
Apr 22 #Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 #Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 #Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 #Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 #Javascript
You might like
上海无线电三厂简史修改版
2021/03/01 无线电
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
校园十佳歌手策划书
2014/01/22 职场文书
升学宴主持词
2014/04/02 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
淘宝好评语句大全
2014/12/31 职场文书
大学毕业生个人总结
2015/02/28 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
高中美术教学反思
2016/02/17 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
Nginx的gzip相关介绍
2022/05/11 Servers