/*

 *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. list-style: none;

    表明list项前面没有什么修饰(一片空白).

  2. JQuery checkbox多选框组选中提交，当选择某（无）一项，其他项禁止选中

    在项目中难免会遇到一些表单的提交,尤其是多选框中,当用户选择了某一项时,禁止其他项的选择.所以为了避免这样的冲突,所以我们前端就得控制一下了,下面就来个简单demo,记录一下,有需要的伙伴可以拿去耍耍 ...

  3. 201771010135 杨蓉庆《面对对象程序设计（java）》第十七周学习总结

    1.实验目的与要求 (1) 掌握线程同步的概念及实现技术: (2) 线程综合编程练习 一.理论知识 ⚫ 线程同步 (1)多线程并发运行不确定性问题解决方案:引入线 程同步机制,使得另一线程要使用该方法 ...

  4. tkinter学习（5）messagebox、pack、grid和place方法

    1.messagebox信息弹出框 1.1 代码: import tkinter as tk #导出tk模块 import tkinter.messagebox #导出弹出信息框 #定义窗口.标题.大 ...

  5. JavaScript 对象的深复制

    对象的深复制 源对象的属性更改,不会引起复制后的对象个属性的更改 源对象的任何属性与子属性与新对象的之间没有任何引用关系 Coding: /* 对象的深复制: 1 初始化目标对象 如果没有指定目标对象 ...

  6. 传奇定时器OnTimer功能详解(泡点、时间触发、任务活动)

    传奇定时器OnTimer功能详解(泡点.时间触发.任务活动) 定时器功能,是传奇服务端中非常常见的一种功能,常见如:泡点脚本.赌博脚本,任务活动指定时间刷怪,时间触发一些都需要用到OnTimer功能, ...

  7. 4_5 追踪电子表格中的单元格（UVa512）（选做）

    在电子表格中的数据都存储在单元格中,它是按行和列(R)(C).一些在电子表格上的操作可以应用于单个单元格(研发),而其他的可以应用于整个行或列.典型的单元操作包括插入和删除行或列和交换单元格内容.一些 ...

  8. 为 git 设定 socks5 代理

    为 git 设定 socks5 代理 查看当前设定 git config --global -l 为 git 设定全局代理 git config --global http.proxy socks5h ...

  9. python opencv：绘图 基本图形

    参数说明 • img:你想要绘制图形的那幅图像. • color:形状的颜色.以 RGB 为例,需要传入一个元组,例如:( 255,0,0)代表蓝色.对于灰度图只需要传入灰度值. • thicknes ...

  10. ArrayList,LinkedList,vector的区别

    1,Vector.ArrayList都是以类似数组的形式存储在内存中,LinkedList则以链表的形式进行存储. 2.List中的元素有序.允许有重复的元素,Set中的元素无序.不允许有重复元素. ...