用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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
python__name__原理及用法详解
2019/11/02 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
专家推荐信模板
2014/05/09 职场文书
倡导文明标语
2014/06/16 职场文书
机关作风建设工作总结
2014/10/23 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
单位委托函范文
2015/01/29 职场文书
工程移交协议书
2016/03/24 职场文书
Python实现排序方法常见的四种
2021/07/15 Python