/*

 *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. python 读取一个文件夹下的所jpg文件保存到txt中

    最近需要使用统计一个目录下的所有文件,使用python比较方便,就整理了一下代码. import os def gci(filepath): files = os.listdir(filepath) ...

  2. 微信小程序开发豆瓣电影接口失效

    豆瓣旧API接口停用,使用以下接口代替 .获取正在热映的电影:https://douban.uieee.com/v2/movie/in_theaters访问参数:start : 数据的开始项 coun ...

  3. 1-1_微信小程序Buddy群记账背景

    1-1_微信小程序需求背景及评审 背景: 我是一个做了2年的Java后台开发 ,最近换了份工作 改做全栈了,需要对各方面的知识都有一定程度的认识及掌握, 虽然现如今还未要求开发小程序,但是已经有趋势了 ...

  4. 实验1 GIT代码版本管理

    (一)实验目的: 1)了解分布式分布式版本控制系统的核心机理: 2) 熟练掌握git的基本指令和分支管理指令: (二)实验内容: 1)安装git 2)初始配置git ,git init git sta ...

  5. Protobuf协议--java实现

    Protobuf协议,全称:Protocol Buffer 它跟JSON,XML一样,是一个规定好的数据传播格式.不过,它的序列化和反序列化的效率太变态了…… 来看看几张图你就知道它有多变态.  pr ...

  6. python opencv：色彩空间

    RGB色彩空间 常见的色彩空间 色彩空间的转换 cv2.cvtColor(image, 转换选项) 常见的两个颜色转换 HSV与RGB YUV与RGB inRange方法 函数参数: 第一个参数:是原 ...

  7. 通过LAMP部署phpMyAdmin、wordpress(https)、discuz

    1.安装启动LAMP 安装环境: CentOS Linux release 7.5.1804 安装包: # yum -y install httpd php php-mysql mariadb-ser ...

  8. java之中文乱码处理

    有些时候,比如文件操作的时候,特别是文件中有中文,会规定用GBK格式,这时读写文件,可能会出现中文乱码 资源文件乱码 文件内容乱码 资源文件乱码: 解决: PropertiesUtil proper ...

  9. mysql 官方读写分离方案

    mysql 8.0 集群模式下的自动读写分离方案 问题 多主模式下的组复制,看起来挺好,起始问题和限制很多.而且中断一个复制就无法配置了 多主模式下,innodbcluster 等于是无用的,不需要自 ...

  10. struct和class定义类的区别

    (1)struct定义的类.struct定义的类,其方法和属性都是公有的(public).因此,外部可以直接访问其内部数据. (2)class定义的类.class定义的类,默认情况下是私有的(priv ...