用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 相关文章推荐
javascript URL锚点取值方法
Feb 25 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
Vue分页组件实例代码
Apr 17 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
vue-socket.io接收不到数据问题的解决方法
May 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
德生PL990的分析评价
2021/03/02 无线电
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
Python构造函数及解构函数介绍
2015/02/26 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
使用Python pip怎么升级pip
2020/08/11 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
J2EE模式面试题
2016/10/11 面试题
毕业生怎样写好自荐信
2013/11/11 职场文书
高中生逃课检讨书
2014/10/10 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
2015年双拥工作总结
2015/04/08 职场文书
九年级英语教学反思
2016/02/15 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python
Linux安装Docker详细教程
2022/07/07 Servers