用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 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
JS上传前预览图片实例
Mar 25 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
AngularJS自动表单验证
Feb 01 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
main.php
2006/12/09 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php使用PDO方法详解
2014/12/27 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
js中判断控件是否存在
2010/08/25 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
利用python实现数据分析
2017/01/11 Python
python查看模块安装位置的方法
2018/10/16 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
浅析Python面向对象编程
2020/07/10 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
市场营销方案范文
2014/03/11 职场文书
婚假请假条怎么写
2014/04/10 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
陕西导游词
2015/02/04 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
Python中的 Set 与 dict
2022/03/13 Python