JS-缓冲运动基础结构
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>缓冲运动2</title>
<style type="text/css">
a{display: block;}
input[type='button']{
margin-top: 5px;
}
.div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 200px;
cursor: pointer;
}
.div2{
width: 1px;
height: 1200px;
position: absolute;
left: 300px;
top: 0;
background-color: blueviolet;
/*用这个标杆，发现div1并没有走到300的准确位置，原因是？*/
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
start();
}
}
function start(){
var oDiv = document.getElementById('div');
setInterval(function(){
var speed = Math.ceil((300-oDiv.offsetLeft)/10);
//300,是自己定义的他要停止的位置值，
//除以10 是必须的，这样就能有效地成倍地降低速度值，注意，更改10的值，可以更改速度，这个10所在分母位置的数值越大，速度越小。
// var speed = Math.ceil((300-oDiv.offsetLeft)/10);
//如果整除不了，会有0.5px，有了小数点，计算机会直接删掉小数点后的数字，导致物体运动不到准确位置。所以最后，用math的ceil方法，向上取整；floor方法，向下取整。
//因为向左走向右走是不确定的，所以用三元判断的方法，如下：
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//但凡遇到缓冲运动，一定要取整
oDiv.style.left = oDiv.offsetLeft+speed+'px';
document.title = oDiv.offsetLeft+','+speed;//用以检查、调试运动点是否正常
},30);
} </script>
</head> <body>
<p>关键点：</p>
<a>距离大，速度大</a>，，，
<a>距离小，速度小</a>
<a>距离和速度成正比</a>
<p style="color: brown;">关键点:遇到“缓冲运动”，一定要取整</p>
<input type="button" value="运动" id="btn" />
<div class="div" id="div"></div>
<div class="div2"></div> </body> </html>
课程来源路径：智能社得开发课程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
JS-缓冲运动基础结构的更多相关文章
- JS缓冲运动案例：右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例：右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
- JS缓冲运动案例
点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...
- [Js]缓冲运动
一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...
- JS 缓冲运动 带运动的留言本 小案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js实现缓冲运动，和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
随机推荐
- resharper安装后，F12不能转到定义，也不是反编译，而是转到对象浏览器（object browser）
问: resharper安装后,一不小心点错了(选择了object browser)以上配置在哪里设置?转到定义用习惯了. 回答 :打开Resharper,选择Options,然后选择Tools中的E ...
- Windows下安装Oracle12C（一）
1,在官网上下载oracle的压缩文件,两个都要下载. 并两个同时选中解压在一个文件夹里面. 2,解压之后,如下图,点击setup.exe稍等一会儿 ,3,开始安装: 不选点击下一步,或者直接点击下一 ...
- ZooKeeper简述
一.简介 ZooKeeper是一个高性能,分布式的,开源分布式应用协调服务.它提供了简单原始的功能,分布式应用可以基于它实现更高级的服务,比如同步,集群管理,命名空间,配置维护等.ZooKeeper使 ...
- vue的iview列表table render函数设置DOM属性值的方法
{ title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ sr ...
- 在eclipse中查看sources源码和JavaDoc帮助文档
今天学习Netty的过程中,从官网下载的netty里面的内容如下: 其中jar文件夹里面的内容如下: 可以看到每一个具体的jar包就对应有一个sources.jar包,然后所有的帮助文档在javaDo ...
- 8 云计算系列之Horizon的安装与虚拟机创建流程
preface 在上一章节中,我们可以在无web管理界面上创建并启动虚拟机,虽然可以这么做,但是敲命令太繁琐,所以此时我们可以安装openstack web管理界面,通过web界面的图形化操作open ...
- 5 云计算系列之glance镜像服务安装
preface 在上节中我们了解了keystone服务,下面就看看glance管理镜像的服务吧. glance组成 glance有两部分组成: glance-api 接受云系统镜像的创建,删除,读取请 ...
- RMAN：简单的duplicate创建新数据库
duplicate to "test" backup location '/home/oracle/11.2.0.4/assistants/dbca/templates/'; du ...
- 让Zend Studio联系关系CakePHP模板文件.ctp
让Zend Studio关联CakePHP模板文件.ctp Zend Studio是套强大的PHP编辑器,各种给力让PHP开发者爱不释手.对于CakePHP程序员来说,有件事情相当头疼,在初始安装好Z ...
- Nginx: error while loading shared libraries: libpcre.so.1解决
Shell代码 [root@tmsapp65 conf]# /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx: error while l ...