/*

 *JS垂直落体回弹原理

 */

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style type="text/css">

 #div1{ width:100px; height:100px; position:absolute; background:red;}

 </style>

 <script type="text/javascript">

 window.onload = function(){

     var oBtn = document.getElementById("btn");

     oBtn.onclick = function (){

         startMove("div1",15);

     }

     function startMove(id,n1){

         var oDiv = document.getElementById(id);

         var iSpeed = 0;

         setInterval(function (){

             iSpeed +=n1;

             var t = oDiv.offsetTop + iSpeed;

             document.title = t + " , " + iSpeed;

             console.log(iSpeed);

             if(t > document.documentElement.clientHeight - oDiv.offsetHeight){

                 t = document.documentElement.clientHeight - oDiv.offsetHeight;

                 iSpeed *= -1;

                 iSpeed *=0.75;

             }

             oDiv.style.top = t + "px";

         },30);

     }

 }

 </script>

 </head>

 <body>

 <input type="button" value="运动" id="btn" />

 <div id="div1"></div>

 </body>

 </html>

JS垂直落体回弹原理的更多相关文章

  1. JS简单回弹原理

    /* *JS简单回弹原理 */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. Js(javaScript)的闭包原理

    问题?什么是js(javaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.  小编 ...

  3. js touch触屏原理分析

    之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理.事实上,大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一:对于Touch的处理”,我想这 ...

  4. 第十一节：Bundles压缩合并js和css及原理分析

    一. 简介 1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是M ...

  5. WebView JS交互 JSBridge 案例 原理 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  6. Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结

    Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...

  7. JS回弹原理-高级

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 利用tween，使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

  9. 原生js实现Ajax的原理。

    Ajax(Asynchronous JavaScript and XML)表示异步的js与xml. 有别于传统web的同步开发方式. 原理:通过XMLHttpRequest对象向服务器发送异步请求,从 ...

随机推荐

  1. Map-HashMap 与 IF 判断内存占用对比

    HashMap与IF判断内存占用对比,事实证明,Map对象在以下情况确实比IF判断占用内存低. HashMap占用内存:13000 package com.taiping.bky; import ja ...

  2. 新手指引，php什么是常量、变量、数组、类和对象及方法？

    众所周知,常量.变量.数组.类和对象及方法共同构成了PHP的基石.那么什么是常量?什么是变量?什么是数组?什么是类和对象及方法?我在此谈谈个人浅见,新手指引,高手勿喷. PHP 常量 定义:常量是单个 ...

  3. RTT学习之软件包

    网络工具集 (NetUtils) Ping 工具: 是一种网络诊断工具,用来测试数据包能否通过 IP 协议到达特定主机,依赖于LWIP,支持域名和IP访问: NTP 工具:NTP 是网络时间协议 (N ...

  4. c++高斯消元法求解线性方程组

    #include<iostream> #include<math.h> #include<string.h> using namespace std; #defin ...

  5. 《记一次Linux被入侵全过程》阅读笔记

    此前从未了解过关于网络安全相关方面的内容,仅仅知道安全性是软件必不可少的质量属性之一,而由于自己所做项目对安全性需求基本为无,所以很少对此进行关注.今天看到作者系统被入侵的经验,于是点开来读,以积累他 ...

  6. 红黑树java代码实现

    红黑树 思想源于:https://www.cnblogs.com/nananana/p/10434549.html有解释有图,很清晰(删除时需考虑根节点和兄弟节点的子节点是否存在) package t ...

  7. lsof 查看打开了一个文件的有哪些进程 统计那个进程打开的文件最多

    lsof | grep /lib64/libc-2.12.so | wc   == 查看打开了一个文件的有哪些进程 lsof | awk '{print $2,$1}' | sort | uniq - ...

  8. ZOJ4114 Flipping Game(2019山东省赛）

    有n个开关,有起始状态和终状态,问如果每次必须选m个开关进行改变状态,一共进行k次,那么有多少种方式可以从起始状态到终状态~ #include<bits/stdc++.h> using n ...

  9. POJ1321棋盘问题（暴搜）

    在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆放方案C. ...

  10. 洛谷P1140 相似基因（线性DP)

    题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了444种核苷酸,简记作A,C,G,TA,C,G,TA,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类 ...