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. SQL SERVER中生僻字问题存储与查询问题

    以下仅记录碰到的几个问题 1.首先字段设置为varchar的时候存储后无法进行正常的显示 显示为? 此状态下匹配查询或者Like模糊查询都没问题 2.将字段设置为nvarchar,在进行插入或者跟新时 ...

  2. java - 数组与String的length方法问题

    java数组没有length()方法,java数组有length属性: String有length()方法.

  3. 2048 控制台版(C#)

    开篇 2048游戏现在很火啊,很多人应该已经玩过了.在博客园上也看见有人模仿做的GDI+版 2048游戏,鄙人暂且不做那么多动画的东西,毕竟是个小东东,在此奉上一个<控制台版2048>. ...

  4. 又一个轮子--QMapper

    1 前言 我喜欢造轮子,一是造的时候就是深刻学习的时候,二是造着造着,说不定某天比世面上的其它轮子都要好呢.比如造过Networksocket,也造过WebApiClient,现在我也要造一个Mapp ...

  5. PHP后门***详解

    说起php后门***我就心有愉季啊前不久一个站就因不小心给人注入了然后写入了小***这样结果大家知道的我就不说了下面我来给大家收集了各种php后门***做法大家可参考. php后门***对大家来说一点 ...

  6. 如何选择合适的SSL证书类型

    网站安装SSL证书就可以将http升级为https加密模式,网站安装SSL证书因此成为一种趋势.如何为网站选择适合的SSL证书类型呢? SSL证书类型可分为2大类:1)按照验证方式分类2)按照支持域名 ...

  7. 学习Python的相关资料

    Learning python the hardway Python Tip社区啄木鸟社区编程指南社区 Python基础教程MIT 计算机科学及其导论Harward:计算机科学CS50Crossin的 ...

  8. 使用JMS接口接入WebSphere MQ消息

    在你的应用程序中利用IBM WebSphere MQ消息中间件提供Java消息服务开放接口. IBM WebSphere MQ(WMQ)是一套面向消息的中间件(message-oriented mid ...

  9. ecshop 管理后台菜单及权限管理机制

    ecshop 所有的一级菜单选项存放于languages\zh_cn\admin\common.php 文件里面,使用 $_LANG['02_cat_and_goods'] = '商品管理';  这样 ...

  10. Maven 项目使用mybatis的环境搭建-基于xml形式实现查询所有的功能

    首先了解一下什么是 MyBatis? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集. ...