<!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. CRM基于.NET的增删改查

    一.准备工作: 1.添加 microsoft.crm.sdk.proxy.dll和microsoft.xrm.sdk.dll 引用到项目中!并引用以下using! using Microsoft.Xr ...

  2. Android自定义控件7--自定义开关--绘制界面内容

    本文实现全自定义控件--自定义开关 本文地址:http://www.cnblogs.com/wuyudong/p/5922316.html,转载请注明源地址. 自定义开关 (View),本文完成下面内 ...

  3. UILabel

    //UILabel->UIView /* 1.实例化 2.属性 3.添加到父视图上 */ //实例化 UILabel *label = [[UILabel alloc] initWithFram ...

  4. iOS程序破解——class-dump获取头文件

    原文在此:http://www.cnblogs.com/mddblog/p/4942894.html 一.简述 class-dump顾名思义,是用来dump目标对象class信息的工具.它根据oc的r ...

  5. 关于Hibernate 的数据库配置

    <hibernate-configuration>    <session-factory name="mySessionFactory">        ...

  6. Linux查看设置系统时区

    关于时区的概念,其实初中地理课已经涉及,很多人都多少了解一些,可能只是细节搞不太清楚.为什么会将地球分为不同时区呢?因为地球总是自西向东自转,东边总比西边先看到太阳,东边的时间也总比西边的早.东边时刻 ...

  7. Java虚拟机栈

    Java Virtual Machine Stacks,线程私有,生命周期与线程相同,描述的是Java方法执行的内存模型:每一个方法执行的同时都会创建一个栈帧(Stack Frame),由于存储局部变 ...

  8. flume：spooldir采集日志，kafka输出的配置问题

    flume配置: #DBFile DBFile.sources = sources1 DBFile.sinks = sinks1 DBFile.channels = channels1 # DBFil ...

  9. .NET应用架构设计—用户端的防腐层作用及设计

    阅读目录: 1.背景介绍 2.SOA架构下的显示端架构腐化 3.有效使用防腐层来隔离碎片服务导致显示端逻辑腐烂 4.剥离服务调用的技术组件让其依赖接口 5.将服务的DTO与显示端的ViewModel之 ...

  10. python MySQLdb 对mysql基本操作方法

    #!/usr/bin/env python # -*- coding:utf-8 -*- import MySQLdb conn = MySQLdb.connect(host=',db='host') ...