用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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
微信小程序实现购物车功能
Nov 18 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP查询分页的实现代码
2017/06/09 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
如何运行带参数的python脚本
2019/11/15 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
校三好学生主要事迹
2014/01/11 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
手术室护士个人总结
2015/02/13 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js