用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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
js实现照片墙功能实例
Feb 05 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
浅析创建javascript对象的方法
May 13 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
利用js canvas实现五子棋游戏
Oct 11 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python面试题之列表声明实例分析
2019/07/08 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
大课间活动制度
2014/01/18 职场文书
清洁工岗位职责
2014/01/29 职场文书
任命书模板
2014/06/04 职场文书
教师党员个人整改措施
2014/10/27 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
好员工观后感
2015/06/17 职场文书
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers