js实现缓冲运动,和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的。
<style>
*{
padding:0;
margin:10px 0;
}
#div1{
height:100px;
width:100px;
background:green;
float:left;
position:relative;
left:1000px;
}
#div2{
border-left:1px solid black;
position:absolute;
height:200px;
left:600px;
float:left;
}
</style> <body>
<div id="div1"></div>
<div id="div2"></div>
</body>
首先定义两个div,一个div只看见一条边,另外一个做运动
js代码如下,带注释
<script>
var i=setInterval(function startMove ()
{
var div1=document.getElementById("div1");
var speed=(600-div1.offsetLeft)/30; //首先获取速度,因为div1。offsetleft=1000,所以此速度为负数
speed=speed>0?Math.ceil(speed):Math.floor(speed); //将速度上下取整,像素没有小数
div1.style.left=div1.offsetLeft+speed+'px'; //因为速度为负数,所以offsetleft越来越小,向左运动 if (div1.offsetLeft==600) //当达到div2的边时停止运动
{
clearInterval(i);
}
}
, 30)
</script>
js实现缓冲运动,和匀速运动有点不相同的更多相关文章
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
- [Js]缓冲运动
一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度=(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
- JS缓冲运动案例:右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例:右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- JS缓冲运动案例
点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
- 点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)
效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...
随机推荐
- pull刷新
package com.example.mylist; import java.util.ArrayList; import java.util.List; import com.example.ad ...
- iOS 动画 旋转 移动简单代码
#import "ViewController.h" @interface ViewController () { UIImageView *imgView; BOOL flag; ...
- HDU 1198(并查集)
题意:给你11个图,每一个都有管道,然后给一张由这11个正方形中的n个组成的图,判断有几条连通的管道: 思路:在大一暑假的时候做过这道题,当时是当暴力来做的,正解是并查集,需要进行一下转换: 转换1: ...
- crackme1.exe解密过程
那今天呢 在西普的做题过程中,发现这么一款.exe,我们来破解一下(当然不是简单的强制爆破,不是简单的打补丁) 我们先用PE 看看 它是用什么写的 有没有加壳什么的 很好 是VC6 ...
- Struts 2之动态方法调用,不会的赶紧来
学习Struts2框架以来为了减少Action 的数量,我们可以使用动态方法进行处理. 动态方法调用(Dynamic Method Invocation,DMI)是指表单元素的Action并不是直接等 ...
- Xcode与OX 版本对照表
xcode1.0-xcode2.x 版本 OS X运行版本 OS X SDK(s) 1.0 OS X Panther(10.3.x) OS X Puma(10.1.x),OS X Jaguar(10. ...
- B - 搬寝室
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Pract ...
- ajax上传图片到服务器
通过Ajax方式上传文件,使用FormData进行Ajax请求.上传文件或图片时,要求的格式为enctype ="multipart/form-data"(以二进制格式上传),在使 ...
- TortoiseGit 添加ssh key
TortoiseGit 使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥.使用命令ssh-keygen -C "邮箱地址" -t rsa产生的密钥在Tortoi ...
- MFC各种控件的常见操作(逐步添加中......)
由于经常切换系统或界面框架进行编程,难免有时会忘记之前的编程函数等等.所有在此自己做一个备份,以防止重新充电带来的痛苦! 1.CButton 1.1 在VC中编程实现按钮的启用(enable)和禁用( ...