JavaScript String 小球重力弹回
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 小球重力弹回的更多相关文章
- 弹性ScrollView,和下啦刷新的效果类似 实现下拉弹回和上拉弹回
今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个很多需求都用的这种效果 其实这是一个自定义的scrollView,上代码,这是我写在一个公共的组件包里的 package com.p ...
- 弹性ScrollView,和下啦刷新的效果相似 实现下拉弹回和上拉弹回
今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个非常多需求都用的这样的效果 事实上这是一个自己定义的scrollView,上代码.这是我写在一个公共的组件包里的 package c ...
- 充满想象力的 JavaScript 物理和重力实验
在这个列表中挑选了9个物理和重力实验,用来展示 Javascript 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的 ...
- JavaScript String 对象
JavaScript String 对象 String 对象 String 对象用于处理文本(字符串). String 对象创建方法: new String(). 语法 var txt = new S ...
- javascript string 函数集
JavaScript_String对象说明 string中文为"字符串"的意思,String继承自Object对象,此对象提供字符串的查找操作等函数 JavaScript字符串类型 ...
- 一款jQuery实现重力弹动模拟效果特效,弹弹弹，弹走IE6
一款jQuery实现重力弹动模拟效果特效 鼠标经过两块黑色div中间的红色线时,下方的黑快会突然掉落, 并在掉落地上那一刻出现了弹跳的jquery特效效果,非常不错,还兼容所有的浏览器, 适用浏览器: ...
- 第一百三十三节，JavaScript，封装库--弹出登录框
JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...
- 【timeisprecious】【JavaScript 】JavaScript String 对象
JavaScript>String 对象 1 .From Runnob JavaScript String 对象(概览) JavaScript String 对象(教程)
- JavaScript 实现简单的 弹出框关闭框
JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...
随机推荐
- CGI,WSGI区别
WSGI 参考link:https://jingtyu.gitbooks.io/learning-openstack/content/351-usgi.html(本人的gitbook) 个人理解: w ...
- 你真的熟练使用webpack吗？
https://www.webpackjs.com/ 官网地址 当自己在简历中写着熟练使用webpack的时候,殊不知自己只是在vue脚手架,react脚手架的路上走着比较轻松而已. 当面试官问你这几 ...
- 基于 HTML5 Canvas 的可交互旋钮组件
前言 此次的 Demo 效果如下: Demo 链接:https://hightopo.com/demo/comp-knob/ 整体思路 组件参数 绘制旋钮 绘制刻度 绘制指针 绘制标尺 绘制文本 1. ...
- LinkedList实现类
List还有一个LinkedList的实现,它是一个基于链表实现的List类,对于顺序访问集合中的元素进行了优化,特别是当插入.删除元素时速度非常快.因为LinkedList即实现了List接口,也实 ...
- 统计学习方法6—logistic回归和最大熵模型
目录 logistic回归和最大熵模型 1. logistic回归模型 1.1 logistic分布 1.2 二项logistic回归模型 1.3 模型参数估计 2. 最大熵模型 2.1 最大熵原理 ...
- 一看就懂的K近邻算法(KNN)，K-D树，并实现手写数字识别！
1. 什么是KNN 1.1 KNN的通俗解释 何谓K近邻算法,即K-Nearest Neighbor algorithm,简称KNN算法,单从名字来猜想,可以简单粗暴的认为是:K个最近的邻居,当K=1 ...
- JDBC连接池-C3P0连接
JDBC连接池-C3P0连接 c3p0连接池的学习英语好的看英文原版 c3p0 - JDBC3 Connection and Statement Pooling 使用c3p0连接池 三种方 ...
- 【算法】【查找】二分法 Bisection
#include<stdio.h> int main(){ ,,,,,,,,,,,,,,}; ; //长度 ; //要查找到的值 int Bisection(int x,int* a,in ...
- 头部姿态估计 - Android
概括 通过Dlib获得当前人脸的特征点,然后通过旋转平移标准模型的特征点进行拟合,计算标准模型求得的特征点与Dlib获得的特征点之间的差,使用Ceres不断迭代优化,最终得到最佳的旋转和平移参数. A ...
- 看完这篇还不清楚Netty的内存管理，那我就哭了！
说明 在学习Netty的时候,ByteBuf随处可见,但是如何高效分配ByteBuf还是很复杂的,Netty的池化内存分配这块还是比较难的,很多人学习过,看过但是还是云里雾里的,本篇文章就是主要来讲解 ...