<!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. VS2012 Unit Test（Void, Action, Func） —— 对无返回值、使用Action或Func作为参数、多重载的方法进行单元测试

    [提示] 1. 阅读文本前希望您具备如下知识:了解单元测试,了解Dynamic,熟悉泛型(协变与逆变)和Lambda,熟悉.NET Framework提供的 Action与Func委托.2.如果您对单 ...

  2. CSS的一些基础知识

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>标题&l ...

  3. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  4. 基于Ruby的Watir-WebDriver自动化测试方案

    Watir-WebDriver       —— 软件测试的自动化时代 QQ群:160409929 自动化测试方案书 系统架构 该自动化测试框架分三个模块:Test用例.Control控制层.Tool ...

  5. ORACLE等待事件：enq: TX - row lock contention

    enq: TX - row lock contention等待事件,这个是数据库里面一个比较常见的等待事件.enq是enqueue的缩写,它是一种保护共享资源的锁定机制,一个排队机制,先进先出(FIF ...

  6. sqoop使用中的小问题

    1.数据库连接异常 执行数据导出 sqoop export --connect jdbc:mysql://192.168.208.129:3306/test --username hive --P - ...

  7. Ant：build.xml 结构

     Ant build.xml 结构 project target task data property datatype v\:* {behavior:url(#default#VML);} o\:* ...

  8. javascript-代理模式

    JavaScript代理模式笔记 由于一个对象不能直接引用另一个对象,所以要用过代理对象在这两个对象之间起到中介作用 1.代理对象形式是通过script标签 demo实例实现的方式也被人称之为JSON ...

  9. PostgreSQL-系统表、系统视图

    系统表显示的都是当前操作数据库下的信息,对象都来自当前数据库.因为不同的系统表都用不同名的字段来记录不同对象的oid,这个表引用那个表,那个表又引用另一个表,所以这些字段名不太好记. pg_class ...

  10. linux mint17.2 安装fcitx输入法

    mint17刚出的时候,曾经在虚拟机上体验过. 现在决定好好学习linux,再加上实在是太萌mint,就在虚拟机上安装了mint17.2 开始配置fcitx输入法: 添加ppa: sudo add-a ...