<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹力球实例</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #E8F8F8;
}
img{
width:50px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<img src="img/box.png" id="img"/>
<script type="text/javascript">
window.onload=function(){
var clientwidth=document.documentElement.clientWidth;
var clientheight=document.documentElement.clientHeight;
document.body.style.width=clientwidth;
document.body.style.height=clientheight;
var x=0;
var y=3;
var e=0;
var r=3;
var flog=true;
var flag=true;
var imgbox=document.getElementById("img");
function run(){
imgbox.style.top=x+'px';
imgbox.style.left=e+'px';
}
var set=setInterval(function(){
//方法一
if(x<clientheight-imgbox.offsetHeight&&flog==true){
x+=y;
}else{
flog=false;
x-=y;
if(x==0){
flog=true;
}
}
if(e<clientwidth-imgbox.offsetWidth&&flag==true){
e+=r;
}else{
flag=false;
e-=r;
if(e==0){
flag=true;
}
}

// 方法二
// x+=y;
// e+=r;
// if(x>clientheight-imgbox.offsetHeight){
// x=clientheight-imgbox.offsetHeight;
// y=-y;
// }
// if(x<0){
// y=-y;
// }
// if(e>clientwidth-imgbox.offsetWidth){
// e=clientwidth-imgbox.offsetWidth;
// r=-r;
// }
// if(e<0){
// r=-r;
// }

run();
},1);
}
</script>
</body>
</html>

js版弹力球实例的更多相关文章

  1. js课程 6-15 js简单弹力球如何实现

    js课程 6-15 js简单弹力球如何实现 一.总结 一句话总结:a.通过document的documentElement属性获取可是区域的高: b.通过增值变为负的实现到底部后反弹 1.docume ...

  2. js 实现弹力球效果

    1.html代码: <div id='imgid'> <img src="img/5.png"> </div> 2.js代码: imgobj=d ...

  3. JS实现弹性势能效果(弹力球效果[实现插件封装])

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. JS版百度地图API

    地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...

  5. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  6. js高级——构造函数，实例对象和原型对象——prototype、__proto__和constructor构造器

    一.前言 了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别 ...

  7. JS版微信6.0分享接口用法分析

    本文实例讲述了JS版微信6.0分享接口用法.分享给大家供大家参考,具体如下: 为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注 ...

  8. Twitter面试题蓄水池蓄水量算法(原创 JS版，以后可能会补上C#的)

    之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...

  9. 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

随机推荐

  1. JavaScript - 如果...没有方法

    这篇文章源于我上一周所读的一篇12年的文章.原作者提出了一个问题,如果js没有原生方法Math.round(),我们如何去实现呢? 对此我和我的基友进行了小小探讨,并给出了一些有意思的答案. 本文内容 ...

  2. IOS开发基础知识--碎片46

    1:带中文的URL处理 // http://static.tripbe.com/videofiles/视频/我的自拍视频.mp4 NSString *path = (__bridge_transfer ...

  3. 【转】单例模式（singletion）

    单例模式(Singleton) 原地址:http://www.cnblogs.com/BoyXiao/archive/2010/05/07/1729376.html 首先来明确一个问题,那就是在某些情 ...

  4. php new self()和new static()

    class A { public static function get_self() { return new self(); } public static function get_static ...

  5. .NET开源插件内核

    http://www.cnblogs.com/newmin/ .NET开源插件内核:支持WinForm和Asp.net. 设计的初衷是:利用“开发平台 + 插件内核"来开发子系统,及对系统进 ...

  6. ORACLE调整SGA_TARGET值耗费时间长案例

    在一数据库版本为(标准版)Oracle Database 10g Release 10.2.0.4.0 - 64bit Production 的服务器上调整 sga_target时,遇到命令执行了非常 ...

  7. asp.net signalR 专题—— 第三篇 如何从外部线程访问 PersistentConnection

    在前面的两篇文章中,我们讲到的都是如何将消息从server推向client,又或者是client再推向server,貌似这样的逻辑没什么异常,但是放在真实 的环境中,你会很快发现有一个新需求,如何根据 ...

  8. 数据库设计范式1——三范式

    一讲到数据库设计,大家很容易想到的就是三范式,但是第四.第五范式又是什么,不是很清楚,三范式到底怎么区分,也不清楚,作为数据库设计的基础概念,我再讲解下数据库范式.   Normal form Bri ...

  9. php之验证码小程序

    验证码功能(个人理解): 减轻服务器的压力(如12306的验证码功能): 防止暴力注册 个人思路:在a-z,A-Z,1-9生成n位随机的数来构成新的验证码. 关于生成验证码的几个小函数 range() ...

  10. 【转】Flex 布局语法教程

    网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...