<!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. iOS---searchBar 搜索框 光标初始位置后移

    #import <UIKit/UIKit.h> @interface SearchBar : UITextField @property (nonatomic,strong) UIButt ...

  2. android 性能分析案例

    本章以实际案例分析在android开发中,性能方面的优化和处理.设计到知识点有弱引用,memory monitor,Allocation Tracker和leakcanary插件. 1.测试demo ...

  3. ios webview自适应实际内容高度4种方法

    有的时候会碰见类似的苦逼需求, webview自适应实际内容高度 下面有四种方法供使用 方法1:获取webview中scrovllview的contentsize进行设置   1 2 3 4 5 6 ...

  4. html经验汇总

    1.点击radio的文字时,自动选中.可以在input里放置label,然后for属性关联input的id <input type="radio" id="male ...

  5. webForm（三）——三级联动

    三级联动 首先附图一张,初步认识一下什么是三级联动:                           注:选第一个后面两个变,选第二个,最后一个改变. 其次,做三级联动需要注意的方面:①DropD ...

  6. kattle 发送post请求

    一.简介 kattle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,数据抽取高效稳定.它允许你管理来自不同数据库的数据,通过提供一个图形化的用户环境来描述 ...

  7. MongoDB官方C#驱动中查询条件Query用法

    Query.All("name", "a", "b");//通过多个元素来匹配数组 Query.And(Query.EQ("nam ...

  8. 【Windows编程】系列第九篇：剪贴板使用

    上一篇我们学习了常见的通用对话框,本篇来了解剪贴板的使用,它常用于复制粘贴功能. 剪贴板是Windows最早就加入的功能,由于该功能非常实用,我们几乎每天都会使用到.通过剪贴板,我们就可以将数据从一个 ...

  9. [转]Python 字符串操作实现代码(截取/替换/查找/分割)

    原文地址:http://www.jb51.net/article/38102.htm ps:好久没更新python代码了,这次用到了字符串,转来看看 Python 截取字符串使用 变量[头下标:尾下标 ...

  10. EF6 的性能优化

    引言 EntityFramework 6 作为微软的开源ORM框架,有着得天独厚的优势.微软也在MVC中主推EF做为ORM框架.但是在实际的项目开发中我们总是感觉到EF有些慢,或者有这样那样的问题.但 ...