JavaScript String 小球重力弹回


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.box{

width: 50px;

height: 50px;

border-radius: 50%;

background:purple;

position: absolute;

top: 0;

left: 0;

}

.line{

width: 500px;

border: 1px solid #333;

position: absolute;

top: 450px;

left: 0;

}

</style>

</head>

<body>

<div class="box"></div>

<div class="line"></div>

</body>

<script type="text/javascript">

var obox=document.querySelector(".box");

var speed=5;//计步器

var target=400;//下落高度

document.onclick=function(){

setInterval(function(){

speed+=10;

var now=obox.offsetTop+speed;

if(now>=target){

now=target;

speed*=-1;//当小球到达底部停止，使他方向相反运动

speed*=0.9;//使小球有一定的速度

}

obox.style.top=now+"px";

},30)

}

</script>

</html>

JavaScript String 小球重力弹回的更多相关文章

  1. 弹性ScrollView,和下啦刷新的效果类似 实现下拉弹回和上拉弹回

    今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个很多需求都用的这种效果 其实这是一个自定义的scrollView,上代码,这是我写在一个公共的组件包里的 package com.p ...

  2. 弹性ScrollView,和下啦刷新的效果相似 实现下拉弹回和上拉弹回

    今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个非常多需求都用的这样的效果 事实上这是一个自己定义的scrollView,上代码.这是我写在一个公共的组件包里的 package c ...

  3. 充满想象力的 JavaScript 物理和重力实验

    在这个列表中挑选了9个物理和重力实验,用来展示 Javascript 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的 ...

  4. JavaScript String 对象

    JavaScript String 对象 String 对象 String 对象用于处理文本(字符串). String 对象创建方法: new String(). 语法 var txt = new S ...

  5. javascript string 函数集

    JavaScript_String对象说明 string中文为"字符串"的意思,String继承自Object对象,此对象提供字符串的查找操作等函数 JavaScript字符串类型 ...

  6. 一款jQuery实现重力弹动模拟效果特效,弹弹弹，弹走IE6

    一款jQuery实现重力弹动模拟效果特效 鼠标经过两块黑色div中间的红色线时,下方的黑快会突然掉落, 并在掉落地上那一刻出现了弹跳的jquery特效效果,非常不错,还兼容所有的浏览器, 适用浏览器: ...

  7. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  8. 【timeisprecious】【JavaScript 】JavaScript String 对象

    JavaScript>String 对象 1 .From Runnob JavaScript String 对象(概览) JavaScript String 对象(教程)

  9. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

随机推荐

  1. python课堂整理19----迭代器和生成器

    一.概念 • 迭代器协议: 对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么引起一个stopIteration异常,以终止迭代(只能往后走,不能往前退) • 协议是一种约定,pyt ...

  2. 开源项目托管到GitHub上

    前提是安装了git客户端 1.进入你的GitHub账户 2.点击new repositories   创建一个新的项目 输入项目名和项目描述   3.复制该项目的https路径 4.找一个文件夹来存放 ...

  3. JNDI资源（一）

    JNDI:Java命名与目录接口 是一个应用程序设计的API,为开发人员提供了查找和访问各种命名和目录的通用.统一的服务. 使用JNDA的步骤: 1.配置资源. //Tomcat跟目录/conf/co ...

  4. 关于引入js文件乱码的问题

    对于大多数的web页面,我们一般都是使用如下两种编码:UTF-8.GB2312.所以我们只需要同意页面和js编码就可以解决乱码问题: 对于GBK页面引用编码为UTF-8编码的JavaScript文件如 ...

  5. [ PyQt入门教程 ] PyQt5信号与槽

    信号和槽是PyQt编程对象之间进行通信的机制.每个继承自QWideget的控件都支持信号与槽机制.信号发射时(发送请求),连接的槽函数就会自动执行(针对请求进行处理).本文主要讲述信号和槽最基本.最经 ...

  6. 蓝桥杯 2n皇后问题 深搜

    默认大家会了n皇后问题 基础练习 2n皇后问题   时间限制:1.0s   内存限制:512.0MB     问题描述 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和 ...

  7. 使用eclipse编写和运行java程序（基础）

    1.首先java程序的运行你需要下载和安装JDK,这是java运行的必备环境. 2.在桌面上找到eclipes,双击打开. 3.在eclipes启动的过程中,会弹出一个窗口,让你填写java工作区的保 ...

  8. 大型系列课程之-七夕告白之旅Electron篇

    上一篇分享了一下vbs的撩妹攻略,但细心的兄弟会发现,这种脚本式的攻城方案并不得心应手,有很多妹子害怕是病毒根本不敢点击,而且这个脚本界面风格也不漂亮,不能轻易打动妹子的心,怎么破,小编这次在为各位老 ...

  9. JavaSE之——并没有多维数组

     近日在读<疯狂Java讲义>精粹第二版,部分语述摘自其中,自己边敲边理解 前言       我们知道,Java语言支持的类型有两种:            1.基本类型(即八大基本数据类 ...

  10. HiveQL DDL 常用QL示例资料

    hive-version2.1.1 DDL操作 Create/Drop/Alter/Use Database 创建数据库 //官方指导 CREATE (DATABASE|SCHEMA) [IF NOT ...