/*

 *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. rosserial学习记录

    1.参考博客:rosserial移植到STM32(CUBEMX+HAL库) 网址:https://blog.csdn.net/qq_37416258/article/details/84844051 ...

  2. 16，div+css的布局较table布局有什么优点？

    改版的时候更加方便,只要改css文件 页面加载速度更快,结构化清晰,页面显示简洁 表现与结构相分离 易于搜索引擎优化,排名更靠前

  3. 我来给你讲清楚Pythony广播

    初学python广播搞的人头大,今天老师上课讲了一下,茅塞顿开,zt老师nb 首先说一下后向纬度(这个后向纬度书里边称作低维),举例:(3,4,5)后向纬度是:3*4*5或4*5或5 向量广播的条件有 ...

  4. 计算机二级-C语言-对二维数组数据进行处理。对文件进行数据输入。形参与实参。

    //函数fun的功能为:计算x所指数组中N个数的平均值(规定所有数都为正数),平均值通过形参返回给主函数,将小于平均值且最接近平均值的数作为函数值返回,并输出. //重难点:形参与实参之间,是否进行了 ...

  5. PB调用.NET类库详解

    要维护一个老的PB系统,有些地方用PB实在不方便,好在就张三.李四几个人用,每人装个.net框架. 设置.NET类COM可见 方式一:将整个程序集设成COM可见 方式二,只公开部分类 使用.Net框架 ...

  6. ASP.NET Core搭建多层网站架构【2-公共基础库】

    2020/01/28, ASP.NET Core 3.1, VS2019,Newtonsoft.Json 12.0.3, Microsoft.AspNetCore.Cryptography.KeyDe ...

  7. 批量给文件加一个后缀 .bak , 一条命令去掉文件的后缀 linux

    给当前文件夹下面的所有文件加上一个后缀 == 一条命令解决 ll | awk '{print $9}' | grep -v '^[ ]*$' |sed -r 's#(.*)#mv \1 \1.bak# ...

  8. linux理论知识点（用于考试）

    ps:为其十天左右的linux培训即将结束了,未雨绸缪,为了更好的通过之后的考试,提前多看些考试题和知识点.这是在chinaunix论坛看到的一个帖子,贴来分享. 原文地址:[http://bbs.c ...

  9. scala基础API

    1.对象和json转换 1.1 json取值 val json:JSONObject = JSON.parseObject(jsonMsg:String)val message:String = js ...

  10. Services: ARP Caching

    Online Help for Cisco IOS Release 12.2(15)JA Services: ARP Caching   ARP caching on the access point ...